工作中接触到生成海报的功能机率应该很大，我这不刚完成了一个，效果如下：
image.png
我们的功能是，已进入页面就生成一张海报，然后长按海报保存相册功能不算复杂，下面就分步介绍实现方法，及注意事项
001 由于小程序挂载在微信，自身体积是从始至终需要控制的，体积越小，体验也越好；所以把图片都放在服务器中获取，可是为了不影响页面渲染速度，需要提前布局把图片预先缓存起来，图片缓存也是优化的重点，wx.setStorageSync缓存方法，不能直接缓存临时文件，需要将临时文件转换成本机识别的本地文件，才能进行缓存的设置与读取，以下就是两个关键方法
/**
* canvas 绘制前需要下载图片
* url 是通过接口获取到的网络图片地址
* wx.downloadFile 是把url 下载，转换成临时文件
*/
function downLoadFileFn(url){
return new Promise(function(resolve,reject){
wx.downloadFile({
url: url,
success: function (res) {
resolve(res);
},
fail: function (e) {
reject(e);
}
})
})
}
/**
* 生成缓存图片
* fs.saveFile 是通过wx.downloadFile获取临时文件路径，转换成可以缓存的本地路径
*/
function saveCacheImage (url, name) {
//使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
const fs = wx.getFileSystemManager();
fs.saveFile({
tempFilePath: url, // 传入一个临时文件路径
success(res) {
// res.savedFilePath 为一个本地缓存文件路径
wx.setStorageSync('imageCache_' + name, res.savedFilePath);
}
})
}
002 入正题，canvas绘制图片，接下来绘制背景、广告图，微信头像、微信名称，二维码（二维码是服务端生成的图片），最后draw()方法打印及wx.canvasToTempFilePath绑定到Canvas控件上，代码如下：
wxml文件：
<image src='{{imagePath}}' bindlongtap='baocun' class='images' mode="scaleToFill"></image>
<view class='tip' wx:if="{{tip}}">
长按图片保存至相册，可分享给好友或朋友圈
</view>
<canvas style='width:355px;height:540px;border:1px solid red;margin-top:-9999px;display:block;' canvas-id='myCanvas'>
</canvas>
js文件：
//绘制图片
drawDone:function(){
let that = this;
const ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('#ffffff');
ctx.setTextAlign('center');
ctx.fillRect(0, 0, 355, 540);
//广告图
//缓存的图片，或者可以直接用网络图片需要先wx.downloadFile
ctx.drawImage(that.data.bgImg, 10, 10, 335, 400);
// 左侧微信头像
//缓存的图片，或者可以直接用网络图片需要先wx.downloadFile
ctx.drawImage(that.data.headImg, 15, 430, 75, 75);
//微信名称
ctx.setFontSize(14);
ctx.setFillStyle('#333333');
ctx.setTextAlign('center');
ctx.fillText(that.data.wxName, 52, 530, 80);
ctx.stroke();
// 右侧二维码
//缓存的图片，或者可以直接用网络图片需要先wx.downloadFile
ctx.drawImage(that.data.codeImg, 240, 430, 75, 75);
//长按识别二维码
ctx.setFontSize(14);
ctx.setFillStyle('#333333');
ctx.setTextAlign('center');
ctx.fillText('长按识别二维码', 278, 530, 80);
ctx.stroke();
//绘制打印
//异步方法，绘制结束再绑定，不会出坑
ctx.draw(false,function(){
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
},
complete: function () {
that.setData({
tip: true
})
wx.hideToast();
}
},that);
});
},
003 长按保存相册功能，直接利用wx.saveImageToPhotosAlbum方法，代码如下
// 保存到相册
save: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
util.showPassToast('图片已保存到相册，赶紧分享一下吧~');
},
complete:function(){
}
})
},
004 这里会有几个坑，需要格外注意：
1.域名不是合法，request，downloadFile,需要域名通过
2.无报错，生成空白页面，由于方法都是基于异步，所以请尽量用promise，保证每个图片都已经downloadFile完成；
3.wxml文件中的canvas标签的高宽单位，一定记得用px,杜绝rpx；如果用rpx后果将是；生成的海报图片会随着手机屏幕分辨率大小而变形，刚开始一直以为是ctx.fillRect()中的高宽设置问题，为此调试了N次，计算N次都无济于事，坑
4.网上很多列子中ctx.draw()并没有利用回调，而是后面直接用setTimeout函数定时再调用wx.canvasToTempFilePath打印，会出现奇怪的现象，有时可以绘制完美海报，有时绘制空白，出现“canvastotempfilepath fail canvas is empty”错误，原因是，如果没绘制完成，wx.canvasToTempFilePath其实是个空对象，所以必然会打印失败；
5.canvas标签css属性如果设置隐藏,打印失败， 提示canvastotempfilepath fail canvas is empty错误
以上是这次的功能的总结心得，欢迎大家讨论，如有用词不得体的地方，请留言，谢谢！
网友评论