微信小程序使用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改變）：