微信小程序-运用painter插件生成海报–比canvas好用
先放插件地址：/Kujiale-Mobile/Painter
还有个可视化把海报生成代码的地址：https://lingxiaoyi.github.io/painter-custom-poster/
有这两个你的海报已经基本完成一大半了，比苦苦的用canvas硬画海报舒服太多了！！！
把这个插件放在你小程序项目component文件下，然后在你需要的地方json文件里引入一下
"usingComponents": {"painter": "/component/painter/painter"}
然后把你在可视化生成的海报代码复制一下，在需要用的那个文件目录生成一个canvas.js（当然你可以随意取名）
然后在对应page页面的js文件里引入这个canvas.js文件，在wxml文件里使用painter组件
<!-- 这个是生成的海报图片预览 --><image src="{{src}}" style="height:980rpx" mode="aspectFit" class="canvas-img"></image><!-- 这个是painter组件使用 --><painter palette="{{wxml}}" style="position: absolute; top: -9999rpx;" bind:imgOK="onImgOK" /><!-- 生成海报按钮 --><button bindtap="painterBtn">生成海报</button>
然后paintertest.js文件里
import canvas from './canvas'// 生成海报点击事件painterBtn() {this.setData({wxml: canvas()})wx.showLoading({title: '正在生成中...',})},// panter onImgOK(e) {console.log(e);this.setData({src: e.detail.path})wx.hideLoading()},
到此也就基本完成了
如果想动态给海报里传参
// paintertest.jsimport canvas from './canvas'// 生成海报点击事件painterBtn() {let name="我是传递的参数";this.setData({wxml: canvas(name) // 在此传递参数})wx.showLoading({title: '正在生成中...',})},
// canvas.jsmodule.exports = data => {return ({"width": "620px","height": "980px","background": "#ffffff","views": [{"type": "text","text": data.name,"css": {"color": "#191846","background": "rgba(0,0,0,0)","width": "536px","top": "486px","left": "41px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","fontSize": "30px","lineHeight": "43px","fontWeight": "normal","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},]});}
以上基本可以解决你大部分的海报绘制需求
