需求：需要生成一张海报保存相册或者是分享给好友。如图这种。
在考虑用canvas自己画还是找插件的路上，我最后选择了找插件。找到了一款很优秀的插件。小程序的painter生成海报。github上的地址（/Kujiale-Mobile/Painter）。
自己写的这个功能，我参考了2位博主的博客。（/hql1024/article/details/106299470?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242）（/ygzrsno/article/details/108535954）。如果这篇博客你们不清楚，可以结合这2篇看看。好了，开始！
1.下载
这个组件有103K，如果大家觉得太大，可以使用微信的分包功能（https://developers./miniprogram/dev/framework/subpackages/basic.html）。在网上下载下来，只需要components/painter这个文件夹就行。放进自己的项目中
2.使用
2.1引用组件
2.2代码
HTML：注意，painter放在弹窗之外，放在最外层！设置了customStyle='position: absolute; left: -9999rpx;'就不会展示在页面里了，
<!-- painter生成海报 --><painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" widthPixels="2000"/><!-- 海报 --><van-popup show="{{ share_show }}" bind:close="onClose" closeable close-on-click-overlay="false"><view class="share"><image src="{{imageSrc}}" mode="widthFix"></image><view style="margin-bottom:5px" hover-class="none" hover-stop-propagation="false"><van-button bindtap="sava" style="margin-left:20px;" type="info">保存到相册</van-button><van-button open-type="share" class="bottom_" style="float: right;margin-right: 20px;" type="info">分享给好友</van-button></view></view></van-popup>
js：
data({canvasData:{imgBgc:'', // 高危和低危不同的海报背景图riskPoint:"0",riskText:'高风险'},template:{} //painter海报的json对象}),// 立即分享share(){this.getDraw()},// 开始绘制getDraw(){// 做判断，如果已经生成过，就不用反复生成了if(this.data.imageSrc){this.setData({imageSrc: this.data.imageSrc,share_show:true,canvasShow:true})}else{wx.showLoading({title: '正在努力生成中',})this.setData({template:{width:'320px',height:'569px',views:[{type:'image',url:this.data.canvasData.imgBgc,css:{width:'100%',height:'100%',top:'0px',left: "0px",mode:'scaleToFill'}},{type:'text',text:this.data.canvasData.riskPoint + "分",css:{top:'85px',left:'255px',fontSize: '12px',maxLines: 1,//限制行数align:'center',color:"#ffffff",fontWeight:"bold"}},{type:'text',text:this.data.canvasData.riskText,css:{top:'100px',left:'256px',fontSize: '12px',maxLines: 1,//限制行数align:'center',color:"#ffffff",}},]}})}},// 保存到相册sava(){wx.getSetting({success:(set)=>{wx.saveImageToPhotosAlbum({filePath: this.data.imageSrc,success: (res)=>{if (res.errMsg == "saveImageToPhotosAlbum:ok") {wx.showToast({title: '保存成功',});}},});if(set.authSetting['scope.writePhotosAlbum'] == false){wx.openSetting()}}})},
效果图：
说一下注意的点：
A：引入本地图片的话，需要这样写“ /images/login/xxx.png”，网络图的话，直接写地址就行
如果Canvas技术不是很好的话，大家可以让设计师给一整张海报，除了需要动态生成的，这样最方便了。哈哈哈哈（UI设计师已经崩溃了）
B：生成的图片很模糊的问题，加一个“ widthPixels="2000" ”。这个数据看自己需求调，因为一般生成图片的话会压缩2倍，所以我们一开始就先设置我们生成图片的2倍或者以上的像素，具体要自己调
如果觉得《-04-21小程序使用Painter生成海报》对你有帮助，请点赞、收藏，并留下你的观点哦！
