一、实现逻辑
- 使用wx.downloadFile()获取图片的路径（wx.getImageInfo这个api也可以获取图片路径）
- 使用canvas的api画出文字与图片
- 用canvasToImage()生成用canvas画出来的图片
- 用wx.saveImageToPhotosAlbum保存图片到手机
二、期间遇到的问题
- canvas无法使用rpx作为单位做适配，所以要动态获取手机屏幕的宽度
- 把整个生成图片的功能封装成自定义组件时wx.canvasToTempFilePath()与wx.createCanvasContext()这两个api需要传去第二个this参数，不然获取不到canvasId
- 使用wx.canvasToTempFilePath()生成图片的画质很模糊，只需要把destWidth，destHeight这两个参数的值是生成图片的宽高的4倍即可
三、代码实现
- wxml代码
<view class="canvas-box">
<canvas
class="canvas"
canvas-id="shareImg"
style="width: {{width}}px; height: {{height}}px;z-index: 100;">
</canvas>
</view>
<view class="btn-box">
<view bindtap="saveImageToLocal">
<view>保存海报</view>
</view>
</view>
- 动态获取屏幕宽度，获取自适应单位（ui图以ipone6为标准）
//获取屏幕宽度，获取自适应单位
wx.getSystemInfo({
success: function(res) {
var num = (res.windowWidth/375).toFixed(2)
this.setData({rpx: num})
}
})
var rpx = _this.data.rpx
//给宽高赋值
this.setData({height: rpx*350})
this.setData({width: rpx*250})
this.setData({leftWidth: rpx*60})
this.setData({topHeight: rpx*110})
- 下载图片
//获取二维码图片
wx.downloadFile({
url: url,
success (res) {
_this.setData({tempFilePath: res.tempFilePath})
},
fail (err) {
console.log(err,'err')
}
})
4.用canvas画图
//在自定义组件中使用canvas，获取wx.createCanvasContext第二个参数必须传入this，不然获取不到
const ctx = wx.createCanvasContext('shareImg',_this);
//绘制一个白色矩形
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, _this.data.width, _this.data.height);
//绘制背景图
ctx.drawImage(
_this.data.wxBgImg, //背景图
0, //目标图片在画布中x坐标
0, //目标图片在画布中y坐标
_this.data.width, //目标图片宽
250*rpx //目标图片高
);
// 绘制想要的文字
ctx.setFontSize(16);
ctx.setFillStyle('black');
ctx.fillText('请扫码购买', 70*rpx, 300*rpx);
ctx.stroke();
// 画（前面都是准备，这才是画的那一步）
ctx.draw(false,_this.canvasToImage());
- 生成canvas画出来的图片
//画二维码
canvasToImage: function () {
var _this = this;
base.hideLoading()
//这里必须加一个定时器，不然会生成图片失败
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'shareImg',
width: _this.data.width,
height: _this.data.height,
destWidth: _this.data.width*4,//输出的图片的宽度是画布区域的宽度的4倍
destHeight: _this.data.height*4,//输出的图片的高度是画布区域的高度的4倍
success: res => {
console.log(res,'画二维码====成功')
_this.setData({
resultImage: res.tempFilePath
});
},
fail: (err) => {
console.log(err,"err==========")
wx.showToast({
title: '图片生成失败',
icon: 'success',
duration: 2000
});
}
},this);//在自定义组件中使用canvas，获取wx.canvasToTempFilePath第二个参数必须传入this，不然获取不到
}, 2000);
- 保存图片
//保存图片
saveImageToLocal() {
wx.saveImageToPhotosAlbum({
filePath: this.data.resultImage,
success: res => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail() {
wx.showToast({
title: '保存失败',
duration: 2000
});
}
});
},
