打卡模板 1

id: h9zuu2zh

预览

快海报分享图片

JSON 样本

{
  "backgroundColor": "#111",
  "backgroundImage": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/laptop.jpg",
  "user": {
    "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
    "nickname": "筱墨"
  },
  "tip": "刚刚完成了打卡",
  "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
  "records": [
    {
      "label": "累积打卡",
      "number": 50,
      "unit": "天"
    },
    {
      "label": "学习时间",
      "number": 60,
      "unit": "分钟"
    },
    {
      "label": "行动力超过",
      "number": 70,
      "unit": "% 的同学"
    }
  ],
  "brand": "快海报",
  "slogan": "小程序分享海报生成服务",
  "company": "快海报",
  "companyColor": "#fff"
}

参数说明

JSON

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

user

参数	必需	说明
avatar	否	string，用户头像，可以传 url 或 base64 图片字符串
nickname	否	string，用户名

record

参数	必需	说明
label	否	string，标题
number	否	string，大字体主要内容
unit	否	string，内容后面的单位

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": "h9zuu2zh",
  "data": {
    your json here...
  }
}

请求方法

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