打卡模板 1

打卡模板 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

参数必需说明
backgroundColorstring,背景色
backgroundImagestring,背景图,可以传 url 或 base64 图片字符串
user用户对象,详情参见 user 部分
tipstring,提示语
qrcodestring,二维码图片,可以传 url 或 base64 图片字符串
recordsrecord 对象的数组,详情参见 record 部分
brandstring,产品名
sloganstring,宣传语
companystring,最底部显示名称
companyColorstring,company 字段显示的颜色,

user

参数必需说明
avatarstring,用户头像,可以传 url 或 base64 图片字符串
nicknamestring,用户名

record

参数必需说明
labelstring,标题
numberstring,大字体主要内容
unitstring,内容后面的单位

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模版渲染