一、實現邏輯
- 使用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
});
}
});
},