本博客主要说下思路，具体代码不贴
1、考虑到组件复用，所以我把它做成一个自定义的组件
<my-poster
id="getPoster"
avater="{{imageUrl}}"
knowledges="{{klPoster}}"
scene="{{topicId}}">
</my-poster>
可以传图片avater、文字内容knowledges、页面参数scene
2、组件里面首先是得需要一个画布。
画布外可以正常写元素标签，定义样式
<view class="mask_screen" wx:if="{{showpost}}">
<view class=\'poster_box\'>
<view class=\'poster_content\' id=\'canvas-container\'>
<canvas canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px;" />
</view>
<view class=\'tips\'>保存图片，分享给小伙伴吧</view>
<view class=\'save\' bindtap=\'saveShareImg\'>
<image class=\'down\' mode=\'widthFix\' src=\'../../assets/dbs/down.png\'></image>
<text>保存</text>
</view>
<image class=\'close\' bindtap=\'closePoste\' mode=\'widthFix\' src=\'../../assets/dbs/close.png\'></image>
</view>
</view>
3、画布准备好之后，就是需要准备画图的一些资源，比如图片之类的
网络图片需利用微信接口 wx.downloadFile 下载下来之后，获取图片的临时地址，根据该临时地址才可以画图；
如果是工程类图片，只需要写好路径，即可以画图。比如：
// 网络图片
if (topicImage) {
wx.downloadFile({
url: topicImage,
success: function(res) {
wx.hideLoading();
if (res.statusCode === 200) {
var productSrc = res.tempFilePath;
that.calculateImg(productSrc, function(data) {
that.getCode(productSrc, data)
})
}
}
})
}
// 工程内图片
let dbicon = \'../../assets/dbs/\' + item.type + \'.png\';
ctx.drawImage(dbicon, 15, offsetHeight + 10, 10, 10)
4、有些图片可能要计算宽高的，需要利用微信接口 wx.getImageInfo 获取图片宽高等信息，wx.getSystemInfo 获取手机屏幕宽高等信息，根据比例去计算绘制
//计算图片尺寸
calculateImg: function(src, cb) {
var that = this;
wx.getImageInfo({
src: src,
success(res) {
wx.getSystemInfo({
success(res2) {
var ratio = res.width / res.height;
var imgHeight = res2.windowWidth * 0.6 / ratio;
// var screeRratio = res2.screenWidth / res2.screenHeight
that.setData({
canvasHeight: imgHeight + 280
// canvasHeight: res2.windowWidth * 0.5 / screeRratio
})
cb(imgHeight);
}
})
}
})
}
5、再就是获取页面的小程序码，微信文档有介绍：三种接口获取方式
获取小程序码：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
6、绘制文字换行问题，上一篇有介绍
7、图片生成之后，保存图片。主要利用微信接口 wx.canvasToTempFilePath 和 wx.saveImageToPhotosAlbum
//点击保存到相册
saveShareImg: function() {
var that = this;
wx.showLoading({
title: \'正在保存\',
mask: true,
})
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: \'myCanvas\',
success: function(res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: \'图片已保存到相册，赶紧晒一下吧~\',
showCancel: false,
confirmText: \'好的\',
confirmColor: \'#333\',
success: function(res) {
that.closePoste();
if (res.confirm) {}
},
fail: function(res) {
console.log(res)
}
})
},
fail: function(res) {
wx.showToast({
title: res.errMsg,
icon: \'none\',
duration: 2000
})
}
})
},
fail: function(err) {
console.log(err)
}
}, that);
}, 1000);
},
8、注意事项：
（1）图片要提前下载：这里面有一个问题就是，图片要提前下载完之后再绘图，不然图片显示不出来，可以把下载图片的方法单独拎出来，然后下载图片后回调绘图方法。
（2）ctx.draw()，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。
大致思路就是如此。
请发表评论