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

?

1.獲取帶參數的小程序碼

小程序開發文檔提供三種接口獲取帶參數的小程序碼，根據自己的需求選擇相應的接口。

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

?

2.將網絡圖片路徑轉換為本地圖片路徑。

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

備注：url1為第一步獲取到的帶參數的小程序碼。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.根據設備寬度設置canvas的width和height。

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

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

?

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

根據canvasId創建canvas繪圖。

根據path1繪制原始的小程序碼圖片。

繪制底部文字說明。

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

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

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

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

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

繪制圖片和文字。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保存至相冊。

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

備注：當用戶關閉了相冊權限時就會調用失敗，此時可在小程序的設置中打開權限。

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: '保存失敗，請在小程序中打開相冊權限',icon: 'none'})}})}}, this) }

?

轉載于:https://www.cnblogs.com/kxx-21k/p/9244454.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。