微信小程序使用Painter生成海报

这里使用大佬已经封装好的Painter，它已经优化canvas的缺陷和兼容安卓与ios，具体可以去看下

Painter地址：https://github.com/Kujiale-Mobile/Painter

一。使用

1.把Painter的demo下载后，把components里的painter文件包提取出来放到自己的组件里面

 

2.把palette文件包里的card.js提取出来放到自己的项目里

 

 3.调用Painter的 .json 文件引入

 "usingComponents": {

    "painter": "/components/painter/painter"

  }

 

4.调用Painter的 .wxml 文件引入

<painter class='painter' palette="{{template}}" bind:imgOK="onImgOK" />

 

5.Painter里demo的example.js原代码是：

onReady: function () {

    this.setData({

      template: new Card().palette(),

    });

  }

 

Painter里demo效果如图:

 

 如果要改成自己的海报的样式话，则可以根据原来的效果图修改下原来的card.js文件

export default class LastMayday {
palette(data) {
let obj = {
width: '655rpx',
height: '982rpx',
background: '#FFF',
views: [
{
type: 'image',
url: data.bg,
css: {
width: '655rpx',
height: '982rpx',
},
},
{
type: 'image',
url: data.code,
css: {
width: '170rpx',
height: '170rpx',
top: '667rpx',
left: '240rpx',
},
},
{
type: 'text',
text: '邀请码：' + data.invite,
css: {
width:'330px',
top: '858rpx',
fontSize: '26rpx',
color: '#FFFFFF',
},
},
{
type: 'text',
text: '扫描或长按二维码识别登陆',
css: {
left: '160rpx',
top: '940rpx',
fontSize: '28rpx',
color: '#FFFFFF',
},
},
],
}

return obj;
}
}

调用Painter的.js文件修改为

　//海报背景

　var url = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2509738482,1756079210&fm=26&gp=0.jpg';

    //邀请码

　var urlInvite = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3679811630,4047661575&fm=26&gp=0.jpg';

　//小程序二维码

    var urlqCord = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1043466043,2581782086&fm=26&gp=0.jpg'

    let data = {

      bg: url,

      invite: urlInvite,

      code: urlqCord,

    }

    this.setData({

      template: new Card().palette(data),

    });

 

效果如图（其它样式可自行根据demo改变）：