You need to enable JavaScript to run this app.
导航

样式结构

最近更新时间2023.02.02 19:11:14

首次发布时间2022.07.20 10:06:05

坐标轴定义

  • 原点:画布左上角
  • X 轴:延画布左上角至右上角
  • Y 轴:延画布左上角至左下角

样式定义

参数类型是否必填描述
idString样式 ID,新建样式时后端生成的唯一标识 ID。
nameString样式名称。
widthInteger画布宽度,取值范围为 (0, 10000]。
heightInteger画布高度,取值范围为 (0, 10000]。
unitString尺寸单位。表示画布宽度和画布高度的像素单位,取值为px
serviceString样式绑定的服务 ID。
backgroundJSON Object画布背景。默认白底,宽高与画布保持一致。
elementsArray of elements画布包含的要素列表,数组顺序即为要素渲染顺序。

output

JSON Object

输出图片设置,默认输出 webp 格式。支持以下取值:

  • jpeg
  • png
  • webp
  • heic

background

参数类型是否必填描述

fill

String

背景颜色,以 # 开始,后面跟 RGB 的十六进制值。

  • 传 6 位 HEX 代表 RGB 值,默认不透明。
  • 传 8 位 HEX 代表 RGBA 值,默认白色。
fillSrcString背景图的 URL 或 URI。

viewpoint

JSON Object

fillSrc 不为空时必填,用于指定背景图的绘制区域。
该区域宽高比应等于画布的宽高比,选中背景图区域后会将该区域缩放至画布大小。

viewpoint

参数类型是否必填描述
xFloat图片绘制的左上角横坐标 = 图片宽度 * x ,取值范围为 [0,1)。默认值为 0。
yFloat图片绘制的左上角纵坐标 = 图片高度 * y ,取值范围为 [0,1)。默认值为 0。
widthFloat图片绘制的宽 = 图片宽度 * width ,取值范围为 (0,1]。默认值为 1。
heightFloat图片绘制的高 = 图片高度 * height ,取值范围为 (0,1]。默认值为 1。

elements

参数类型是否必填描述
idString要素 ID,样式内唯一标识。
nameString要素名称。

type

String

要素类型,取值如下所示:

  • image:图片
  • qrcode:二维码
  • text:文字
  • shape:形状
leftInteger要素左上角横坐标。
topInteger要素左上角纵坐标。
widthInteger要素宽,取值范围为 (0, 10000]。
heightInteger要素高,取值范围为 (0, 10000]。

content

String

要素内容,可通过参数动态替换该字段值。

  • type=image时,取值图片 URL 或 URI;
  • type=text时,取值文本内容;
  • type=qrcode时,取值二维码内容;
opacityInteger要素透明度,取值范围为 [0,100]。默认值为 100,不透明。
angleFloat要素旋转角度。为相对要素中心点逆时针旋转角度,取值范围为 [0,360]。

flipX

Bool

是否水平翻转要素,默认值为 false。取值如下所示:

  • true:翻转;
  • false:不翻转。

flipY

Bool

是否垂直翻转要素,默认值为 false。取值如下所示:

  • true:翻转;
  • false:不翻转。
attrJSON Object要素属性。

attr

要素类型type参数类型是否必填描述
图片imagefillptnJSON Object图片填充策略。
filterArray of image.filter图片处理操作列表。
maskJSON Object图片蒙版设置。

文字

text

font

String

文字字体,默认为思源黑体。
支持字体取值请参考字体列表

fontSize

Float

文字字号。默认值 30,单位为 px。
仅当fontAdapt取值为false时生效。

fontAdaptBool是否开启字号自适应。
仅当adapt取值为false时生效。
fillptnJSON Object文字颜色填充模式,默认以纯白色填充。

textAlign

Integer

多行文本对齐方式,取值如下所示:

  • 0:左对齐/上对齐;
  • 1:居中对齐;
  • 2:右对齐/下对齐;
  • 3:两端对齐。

textAlignH

Integer

文本内容相对于文字框的对齐方式,取值如下所示:

  • 0:上对齐/右对齐;
  • 1:居中对齐;
  • 2:下对齐/左对齐。

lineSpace

Float

多行文本行间距,为相对于单行文本高度的比例。
默认值为 1.2 倍行距,取值范围为[0.5,2.5]。

说明

因文本框大小等限制,结果图中文本行间距调整效果可能无法按预期呈现,例如部分文字的显示不全。

wordSpaceFloat文字字间距,单位为 1/1000 em。
默认值为 0,取值范围为[-1000,2000]。

writingMode

Integer

文本绘制模式,取值如下所示:

  • 0:从左往右;
  • 1:从上往下。

bold

Bool

是否加粗,取值如下所示:

  • true:加粗;
  • false:不加粗。

oblique

Bool

是否倾斜,取值如下所示:

  • true:倾斜;
  • false:不倾斜。

linethrough

Bool

是否添加删除线,取值如下所示:

  • true:添加;
  • false:不添加。

underline

Bool

是否添加下划线,取值如下所示:

  • true:添加;
  • false:不添加。

adapt

Bool

是否自适应,取值如下所示:

  • true:不自动换行,要素长度等于单行文本的最大长度;
  • false:将根据要素大小自动换行。
borderJSON Object文字边框,默认无边框。

二维码

qrcode

type

Integer

二维码类型,取值如下所示:

  • 0:文本;
  • 1:网页链接。

形状

shape

type

String

形状类型,取值如下所示:

  • line:线;
  • rect:矩形;
  • circle:圆。

fillColor

String

填充颜色。以 # 开始,后面跟 RGB 的十六进制值。

  • 传 6 位 HEX 代表 RGB 值,默认不透明;
  • 传 8 位 HEX 代表 RGBA 值。

strokeColor

String

描线颜色。以 # 开始,后面跟 RGB 的十六进制值。

  • 传 6 位 HEX 代表 RGB 值,默认不透明;
  • 传 8 位 HEX 代表 RGBA 值。
weightInteger边框粗细,取值范围为 (0,100]。
dashInteger虚线 dash 值,取值大于 0,值越大则虚线间的间隔越大。
radiusFloat圆角半径,仅当type取值为rect时生效。
默认值为 0,为矩形边框。

image.fillptn

参数类型是否必填描述

ptn

Integer

填充策略,取值如下所示:

  • 0:强制宽高;
  • 1:匹配短边裁剪;
  • 2:匹配长边缩略;
  • 3:固定高度、宽度自适应;
  • 4:固定宽度、高度自适应;
  • 5:不缩放。
viewpointJSON Object图片渲染区域,仅当ptn=0时生效。

viewLoc

Integer

图片展示位置,仅当ptn不为0时生效。

  • 1:左上;
  • 2:中上;
  • 3:右上;
  • 4:左中;
  • 5:居中;
  • 6:右中;
  • 7:左下;
  • 8:中下;
  • 9:右下。
bgColorString背景填充颜色,以 # 开始,后面跟 RGB 的十六进制值。默认空,无填充。

image.filter

参数类型是否必填描述
nameString操作名称。
paramJSON Map操作参数列表。

image.filter.param

编辑操作name参数名称参数类型是否必填参数描述
亮度brightbrightFloat调整图片亮度,取值范围为 [-100, 100]。
对比度contrastcontrastFloat调整图片对比度,取值范围为 [-100, 100]。
负片invert----
锐化sharpensharpenFloat锐化图片,取值大于等于 0。
高斯模糊blursigmaFloat高斯模糊图片,取值大于 0。
饱和度saturationsaturationFloat图片的饱和度,取值范围为 [-100, 100]。

image.mask

参数类型是否必填描述
uriString蒙版图片的 TOS URI 或完整 URL(任意公网可访问 URL)。

fillptn

Integer

蒙版填充策略,取值如下所示:

  • 0:强制宽高;
  • 1:匹配短边裁剪;
  • 2:匹配长边缩略;
  • 3:固定高度、宽度自适应;
  • 4:固定宽度、高度自适应;
  • 5:不缩放。

viewLoc

Integer

蒙版展示位置,仅当fillptn不为0时生效。

  • 1:左上;
  • 2:中上;
  • 3:右上;
  • 4:左中;
  • 5:居中;
  • 6:右中;
  • 7:左下;
  • 8:中下;
  • 9:右下。

text.fillptn

参数类型是否必填描述
nameString颜色填充模式。
paramJSON Map颜色填充参数。

text.fillptn.param

填充模式name参数名称参数类型是否必填参数描述

纯色

color

color

String

文字填充颜色。以 # 开始,后面跟 RGB 的十六进制值。

  • 传 6 位 HEX 代表 RGB 值,默认不透明。
  • 传 8 位 HEX 代表 RGBA 值,默认白色。

text.border

参数类型是否必填描述
weightInteger边框粗细。
dashInteger虚线 dash 值。取值大于 0 时生效,值越大则虚线间的间隔越大,暂无最大限制。
radiusFloat圆角半径。默认值为 0,为矩形边框。

color

String

边框颜色。以 # 开始,后面跟 RGB 的十六进制值。

  • 传 6 位 HEX 代表 RGB 值,默认不透明。
  • 传 8 位 HEX 代表 RGBA 值。

paddingTop

Integer

上边距,默认值为 0。

  • adapt=false时表示相对文本区域的距离;
  • adapt=true时表示相对文本的距离。

paddingBottom

Integer

下边距,默认值为 0。

  • adapt=false时表示相对文本区域的距离;
  • adapt=true时表示相对文本的距离。

paddingLeft

Integer

左边距,默认值为 0。

  • adapt=false时表示相对文本区域的距离;
  • adapt=true时表示相对文本的距离。

paddingRight

Integer

右边距,默认值为 0。

  • adapt=false时表示相对文本区域的距离;
  • adapt=true时表示相对文本的距离。

output

参数类型是否必填描述
formatString渲染结果输出格式,可选取值:JPEG、WEBP、PNG、HEIC。默认 WEBP。
qualityInteger渲染结果编码质量参数,取值范围为 [0,100]。
默认值为 75, 该值越高则表示结果图编码质量越高。

样式示例

{
    "id": "6130814f8241a65f9838427*",
    "name": "样式示例",
    "width": 1080,
    "height": 1920,
    "unit": "px",
    "service": "241hsrmp5*",
    
    "background": {
        "fill": "#FFFFFF",
        "fillSrc": "imagex-rc/previe*.jpg",
        "viewpoint": {
            "x": 0.25,
            "y": 0,
            "width": 0.5,
            "height": 1
        }
    },
    
    "elements": [
        {
            "id": "ele1",
            "name": "图片要素",
            "type": "image",
            "left": 50,
            "top": 100,
            "width": 400,
            "height": 800,
            "content": "tos-cn-i-19tz3ytenx/2cfccfd443a380b561f12ec385d*.jpg",
            "opacity": 75,
            "attr": {
                "viewpoint": {
                    "x": 0,
                    "y": 0,
                    "width": 1,
                    "height": 1
                },
                "filter": [
                    {
                        "name": "bright",
                        "param": {
                            "bright": 70
                        }
                    }
                ]
            }
        },
        {
            "id": "ele2",
            "name": "文字要素",
            "type": "text",
            "left": 720,
            "top": 300,
            "width": 100,
            "height": 50,
            "content": "这里是文字",
            "attr": {
                "font": "SourceHanSans-Regular.ttf",
                "fontSize": 30,
                "fillptn": {
                    "name": "color",
                    "param": {
                        "color": "#FFFFFF"
                    }
                },
                "textAlign": 0, 
                "lineSpace": 1.2,
                "wordSpace": 0,
                "opacity": 75,
                "writingMode": 0
            }
        },
        {
            "id": "ele3",
            "name": "二维码要素",
            "type": "qrcode",
            "left": 1000,
            "top": 10,
            "width": 80,
            "height": 80,
            "content": "这里是一段文字",
            "attr": {
                "type": 0
            }
        }
    ],
    
    "output" {
        "format": "WEBP",
        "quality": 75
    }
}