抽奖模板 1

抽奖模板 1

id: kzccda95

预览

快海报分享图片

JSON 样本

{
  "backgroundColor": "#fafafa",
  "backgroundImage": "",
  "user": {
    "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
    "nickname": "筱墨",
    "color": "#666"
  },
  "tip": "邀请你来抽奖",
  "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
  "records": [
    {
      "title": "一等奖",
      "desc": "10 月 16 日 10:00 开奖",
      "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"
    }
  ],
  "brand": "快海报",
  "slogan": "小程序分享海报生成服务",
  "metaColor": "#999"
}

参数说明

JSON

参数必需说明
backgroundColor否string，背景色
backgroundImage否string，背景图，可以传 url 或 base64 图片字符串
user否用户对象，详情参见 user 部分
tip否string，提示语
qrcode否string，二维码图片，可以传 url 或 base64 图片字符串
records否record 对象的数组，详情参见 record 部分
brand否string，产品名
slogan否string，宣传语
metaColor否string，tip brand slogan 字段显示的颜色

user

参数必需说明
avatar否string，用户头像，可以传 url 或 base64 图片字符串
nickname否string，用户名
color否string，color 字段显示的颜色

record

参数必需说明
title否string，标题
desc否string，描述
image否string，主图，可以传 url 或 base64 图片字符串

base64 图片字符串

例如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQAAAAB0CZXLAAABUElEQVR4Ae3ZMa6DMBAE0IkoUuYIPgpHI0fjKByBkgIxfxezlvOrVT6/m6mW0atQZGwHkQe5DsS42bDY0CKQBSM9mwPABlgGRi3APLAexcC79oc9kVF/CQQ4w4a/AgHgBFyGfwEC9ASgV4WMOgsEWgy8dnB+Hpi6b1YaCDBigDTAz2SBAMY19lHcUVPIGO4DApxt4PJkbA8sC6x+kVangcBZoWyxPsAGXJlM5oBApPAAMPBcaVF2/y0/SG55IDCSvA6k/mTVxAu8gTuBwDrQ87ll5fzyfcKTeSDAHeeW1dPO/t36kAcCsT4AbX2wPCpPA4EVV+o3KxKXAHcBAba8McTR1YcVmJgHAr+uoxEn1vhmpYFAf4viTxW0V50HAv3NnnMfPLW5Hwh056yyX/V3QADdv1GWw+s8EGjrAxmv2sEMYGIaCLRYH1vWyWTkNiDwAzxizYbj8refAAAAAElFTkSuQmCC

我们将通过这样的方式渲染：

<img src="data:image/png;base64,iVBORw0KGgoAAAA....">

颜色使用说明

以 CSS 方式渲染，例如：#111 / #ffffff / #1F1F1F / rgb(197,93,161) / black 均为可接受类型

背景色与背景图片

使用方式为二选一，使用背景色或背景图片，如果两个值同时存在，则取背景色优先。

records

record 元素渲染时，在水平方向上平均分布，建议不要超过 3 个元素，否则可能会因为宽度不够互相挤压，生成效果受影响

使用方法

将本模板所需数据的的 JSON 表示填充到 海报生成 API 的 data 字段中，最终的 post body 如下：

{
  "template": "kzccda95",
  "data": {
    your json here...
  }
}

请求方法

请求方法请参考 海报生成 API 和 模版渲染