抽奖模板 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...
}
}