图片内容描述

imgrender 通过特定的 JSON 数据描述图片内容，我们称之为“蓝图”。蓝图决定了如何渲染图片与图片有什么内容。

下面将详细介绍“蓝图”的属性与组成。

#蓝图

蓝图完整描述了图片的规格与图片中的内容。具体属性如下：

#示例

{
    "width": 640,
    "height": 1050,
    "backgroundColor": "#d75650",
    "blocks": [
        {
            "x": 15,
            "y": 268,
            "width": 610,
            "height": 770,
            "backgroundColor": "#fff",
            "borderColor": "#fff"
        }
    ],
    "texts": [
        {
            "x": 320,
            "y": 185,
            "text": "Davinci Li",
            "font": "jiangxizhuokai",
            "fontSize": 22,
            "color": "#fff",
            "width": 320,
            "textAlign": "center",
            "zIndex": 1
        },
        {
            "x": 320,
            "y": 220,
            "text": "邀请你来参加抽奖",
            "font": "jiangxizhuokai",
            "fontSize": 22,
            "color": "#fff",
            "width": 320,
            "textAlign": "center",
            "zIndex": 1
        },
        {
            "x": 30,
            "y": 640,
            "text": "奖品: 本田-CB650R 摩托车",
            "font": "jiangxizhuokai",
            "fontSize": 22,
            "color": "#000",
            "width": 580,
            "textAlign": "left",
            "zIndex": 1
        },
        {
            "x": 30,
            "y": 676,
            "text": "01 月 31 日 18:00 自动开奖",
            "font": "jiangxizhuokai",
            "fontSize": 18,
            "color": "#9a9a9a",
            "width": 580,
            "textAlign": "left",
            "zIndex": 1
        },
        {
            "x": 320,
            "y": 960,
            "text": "长按识别二维码，参与抽奖",
            "font": "jiangxizhuokai",
            "fontSize": 22,
            "color": "#9a9a9a",
            "width": 580,
            "textAlign": "center",
            "zIndex": 1
        }
    ],
    "lines": [
        {
            "startX": 30,
            "startY": 720,
            "endX": 610,
            "endY": 720,
            "width": 1,
            "color": "#E1E1E1",
            "zIndex": 1
        }
    ],
    "images": [
        {
            "x": 248,
            "y": 25,
            "width": 120,
            "height": 120,
            "url": "https://img-chengxiaoli-1253325493.cos.ap-beijing.myqcloud.com/bikers_327390-13.jpg",
            "borderRadius": 60,
            "zIndex": 1
        },
        {
            "x": 108,
            "y": 285,
            "width": 400,
            "height": 300,
            "url": "https://img-chengxiaoli-1253325493.cos.ap-beijing.myqcloud.com/cb650R.jpeg",
            "zIndex": 1
        }
    ],
    "qrcodes": [
        {
            "x": 208,
            "y": 726,
            "size": 200,
            "content": "http://weixin.qq.com/r/yRzk-JbEbMsTrdKf90nb",
            "foregroundColor": "#000",
            "backgroundColor": "#fff",
            "zIndex": 1
        }
    ]
}

下面将详细介绍描述图片内容的各类组件。

#坐标系

在学习各类组件之前，需要先了解与图片元素的位置有关的重要概念：坐标系。

imgrender 采用的坐标系为：

• 左上角为全局坐标原点(0,0)。

• 从左至右为 X 轴，从上至下为 Y 轴

• 单位为像素（px）。

#文本

文本组件可以向图片中添加文字内容。

具体属性如下：

#属性

#定位锚点

属性textAlign会影响文本的定位锚点。

如上图所示，虚线框为文字展示宽与行高。

文本奖品：本田-CB650R的 textAlign 属性值为left，则锚点在文本的「左上角」。

文本 长按识别二维码，参与抽奖 的 textAlign 属性值为 center，则锚点在文本「中上」位置。

文本 Davinci Li 的 textAlign 属性值为 right，则锚点在文本「右上角」。

#字体

目前暂不支持使用自定义字体。imgrender 目前提供以下可免费商用的字体：

#示例

{
  "x": 320,
  "y": 185,
  "text": "Davinci Li",
  "font": "SourceHanSansSC-Normal",
  "fontSize": 22,
  "color": "#fff",
  "width": 320,
  "textAlign": "center"
}

#图片

图片组件可以向图片中添加图片内容，例如添加自定义的背景图。

图片链接需要保证能够正常访问下载。

支持的图片格式有：gif、jpeg、png、bmp、tiff、webp

#属性

#示例

{
  "x": 248,
  "y": 25,
  "width": 120,
  "height": 120,
  "url": "https://img-chengxiaoli-1253325493.cos.ap-beijing.myqcloud.com/bikers_327390-13.jpg",
  "borderRadius": 60,
  "zIndex": 1
}

#线段

线段组件可以向图片中添加线段，可用于绘制分割线、下划线等。

#属性

#示例

{
  "startX": 30,
  "startY": 696,
  "endX": 610,
  "endY": 696,
  "width": 1,
  "color": "#E1E1E1",
  "zIndex": 1
}

#矩形

矩形组件可以向图片中添加矩形。

#属性

#示例

{
  "x": 220,
  "y": 100,
  "width": 380,
  "height": 200,
  "backgroundColor": "#fff",
  "borderColor": "#fff"
}

#二维码

二维码组件可以向图片中添加二维码内容，可以用于添加分享链接二维码。

#参数

二维码组件存在背景色边框，例如上图中二维码的白色边框。边框的粗细由二维码尺寸与编码内容长度共同决定，例如当 size 为 200px 时，但仅编码一个字符 a，则边框就会比上图更宽。通过设置与环境色相同的二维码背景色，可消除二维码边框的影响。

#示例

{
  "x": 208,
  "y": 726,
  "size": 200,
  "content": "http://weixin.qq.com/r/yRzk-JbEbMsTrdKf90nb",
  "foregroundColor": "#000",
  "backgroundColor": "#fff",
  "zIndex": 1
}