場景：使用小程序文檔的API可以獲取帶參數(shù)的二維碼和小程序碼，但是小程序碼中的圖片默認(rèn)都是小程序的頭像（紅框中的圖片）。現(xiàn)在我們需要替換里面的圖片，然后將小程序碼保存成一張圖片存入相冊。

?

1.獲取帶參數(shù)的小程序碼

小程序開發(fā)文檔提供三種接口獲取帶參數(shù)的小程序碼，根據(jù)自己的需求選擇相應(yīng)的接口。

https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html

?

2.將網(wǎng)絡(luò)圖片路徑轉(zhuǎn)換為本地圖片路徑。

• 使用wx.getImageInfo或者wx.downloadFile可以返回圖片的本地路徑。
• 用wx.setStorage將返回的本地路徑存儲在本地緩存中并指定key的值：path1，path2。
• 用wx.getStorageSync(KEY)從本地緩存中同步獲取指定的key對應(yīng)的內(nèi)容。

備注：url1為第一步獲取到的帶參數(shù)的小程序碼。url2為需要填入小程序碼中間的圖片。

const url1 = "https://images/ewm.jpg"; const url2 = "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epNAxDh5I0dQAQrNVs4pKWrYibfbA6Xw6lOJqqYic4qTFXt9tjbTJrgpusYy4KCEXnF3iaib8sdqP6CfQ/132"; wx.getImageInfo({src: url1,success:function(res){wx.setStorage({key: 'path1',data: res.path,})} }) wx.getImageInfo({src: url2,success:function(res){wx.setStorage({key: 'path2',data: res.path,})} }) const path1 = wx.getStorageSync('path1'); const path2 = wx.getStorageSync('path2');

?

3.根據(jù)設(shè)備寬度設(shè)置canvas的width和height。

• 在WXML中設(shè)置canvas組件，并在JS文件中設(shè)置data字段width，height，margin。
• 獲取設(shè)備的寬度，并保存在全局變量windowWidth中。
• 在小程序碼生成頁面讀取全局變量windowWidth，并根據(jù)設(shè)備的寬度設(shè)置canvas的width，height，margin。

<canvas style='width:{{width}}px;height:{{height}}px;margin:50px {{margin}}px;background-color:#ffffff;' canvas-id='ewmCanvas'></canvas>
// 獲取設(shè)備寬度 wx.getSystemInfo({success: function (res) {app.globalData.windowWidth = res.windowWidth;}, }) //在對應(yīng)頁面讀取設(shè)備的寬度 const width = app.globalData.windowWidth*4/5; const height = app.globalData.windowWidth; const margin = app.globalData.windowWidth / 10; //在data中設(shè)置canvas的width和height以及左右的邊距margin this.setData({width:width,height: height,margin: margin })

?

4.使用canvas繪制小程序碼。

根據(jù)canvasId創(chuàng)建canvas繪圖。

根據(jù)path1繪制原始的小程序碼圖片。

繪制底部文字說明。

通過ctx.save()保存當(dāng)前的繪圖上下文。

繪制一個圓形，使它能夠完全覆蓋掉原始小程序碼中間的圖片區(qū)域。

通過ctx.clip()方法將畫布中的圓形裁剪出來。

在裁剪的圓形區(qū)域繪制一個相同大小的圖片（path2），此時圖片只能顯示剪切后的圓形區(qū)域。

ctx.restore()恢復(fù)之前保存的繪圖上下文。

繪制圖片和文字。ctx.stroke()，ctx.draw()。

const ctx = wx.createCanvasContext('ewmCanvas') ctx.drawImage(path1, 0, 0, this.data.width, this.data.width); ctx.setTextAlign('center') ctx.setFillStyle('#8c8c8c') ctx.setFontSize(15) ctx.fillText('掃一掃小程序碼', this.data.width / 2, this.data.width + 30) ctx.save(); ctx.strokeStyle = "#ffffff"; ctx.arc(this.data.width / 2, this.data.width / 2, this.data.width * 9 / 40, 0, 2 * Math.PI); //繪制圓形 ctx.clip(); ctx.drawImage(path2, this.data.width * 11 / 40, this.data.width * 11 / 40, this.data.width * 9 / 20, this.data.width * 9 / 20); ctx.stroke(); ctx.restore(); ctx.draw();

?

5.將canvas保存至相冊。

• 創(chuàng)建一個點擊事件saveImg。
• 調(diào)用wx.canvasToTempFilePath將canvas存儲在本地，big返回一個本地路徑。
• 調(diào)用wx.saveImageToPhotoAlbum將返回的本地路徑保存至相冊。
• 調(diào)用wx.showToast創(chuàng)建保存成功與失敗時的消息提示框。

備注：當(dāng)用戶關(guān)閉了相冊權(quán)限時就會調(diào)用失敗，此時可在小程序的設(shè)置中打開權(quán)限。

saveImg:function(e){wx.canvasToTempFilePath({canvasId: 'ewmCanvas',success: function (res) {const path = res.tempFilePath;wx.saveImageToPhotosAlbum({filePath: path,success: function (res) {wx.showToast({title: '保存成功',icon:'success'})},fail: function (res) {wx.showToast({title: '保存失敗，請在小程序中打開相冊權(quán)限',icon: 'none'})}})}}, this) }

?

轉(zhuǎn)載于:https://www.cnblogs.com/kxx-21k/p/9244454.html

總結(jié)

以上是生活随笔為你收集整理的使用canvas绘制小程序码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。