微信小程序使用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 文件引入

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改变）：