• 目的：

如题，生成分享海报（图片）

• 使用组件：

Painter 一款轻量级的小程序海报生成组件

• 效果：

• 傻瓜教程（仅需3步）：

1.在项目根目录下，下载组件

git clone https://github.com/Kujiale-Mobile/Painter.git

2.编写代码

wxml代码：

<view>
  <image src='{{imgSrc}}' style="width: 100%;height: {{validHeight}}px;" show-menu-by-longpress="true"></image>
</view>
<painter palette="{{imgData}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/>

json代码：

{
  "usingComponents": {
    "painter": "/components/painter/painter"
  }
}

js代码：

data: {
    imgSrc:'',
    imgData:{},// 数据获取 --> https://lingxiaoyi.github.io/painter-custom-poster/
},
onImgOK(e) {
  this.setData({
    imgSrc: e.detail.path
  })
  wx.hideLoading()
},
onImgErr(e) {
  wx.hideLoading()
  wx.showToast({
    title: 'something is going wrong',
    icon: 'none'
  })
},
onReady: function () {
  wx.showLoading({
   title: '加载中',
    mask: true
 })
},

3.可视化设置海报，并获取imgData，点我获取

• 拓展阅读：

生成分享海报（canvas2d）

完。