微信小程序使用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改变):

 

 

GG-伏沙金
posted @ 2020-10-19 14:00  伏沙金  阅读(2032)  评论(0编辑  收藏  举报