微信小程式（canvas）畫圖儲存到本地相簿（wepy）

html標籤部分

因為這個需要使用者授權 所以需要使用button，畫布使用的是canvas，這個可以參考小程式官方文件，程式碼如下

 <button class='btn'  type="default" open-type="getUserInfo"  @tap='exportImg'>
 生成圖片儲存到本地
 </button>
  <canvas canvas-id="shareCanvas" style='width:375px;height:515px'/>
複製程式碼

js實現部分

（1）注意這裡如果是採用網路圖片作為地圖的話，注意小程式download的授權問題，圖片域名需要時認可的，

（2）使用網路圖片之前需要先使用者授權scope.writePhotosAlbum，授權成功之後再呼叫下載（downloadFile）的api

（3）順序是，使用者授權->呼叫下載api->呼叫選擇網路圖片api->建立canvas->繪製畫布->繪製文字，樣式->將內容繪製到畫布上->生成圖片->儲存到系統相簿，程式碼如下

 methods = {
    exportImg: () => {
      // 先獲取使用者授權
      wx.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.methods.draw()
              }
            })
          } else {
            this.methods.draw()
          }
        } }) },
    draw: () => {
      wx.downloadFile({ // 先下載
        url: 'xxx.png', // 僅為示例，並非真實的資源
        success: (res) => {
          if (res.statusCode === 200 ||res.statusCode === 201) {
            console.log(res, '-------')
            wx.getImageInfo({  //  選擇網路圖片
              src: res.tempFilePath,
              success: (res) => {
                console.log('底圖畫好了')
                console.log(res.path, '底圖路徑')
                // createCanvasContext 建立 canvas 繪圖上下文（指定 canvasId）
                const ctx = wx.createCanvasContext('shareCanvas')
                // drawImage 繪製影象到畫布。
                ctx.drawImage(res.path, 0, 0, 375, 515)
                ctx.setTextAlign('center')    // 用於設定文字的對齊
                ctx.setFillStyle('#1AA9E3') // 文字顏色
                ctx.setFontSize(35)     // 文字字號
                ctx.fillText('簡單', 375 / 2, 515 / 3)  //  在畫布上繪製被填充的文字。
                ctx.setFillStyle('#C9D75E')
                ctx.setFontSize(22)
                ctx.fillText('我從你的全世界路過了一下', 375 / 2, 220)
                console.log('文字畫好了')
                // ctx.stroke()   //  畫出當前路徑的邊框。預設顏色色為黑色。
                ctx.draw()  // 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。
                console.log('圖生成了')
                ///  把當前畫布指定區域的內容匯出生成指定大小的圖片，並返回檔案路徑
                const wxCanvasToTempFilePath = wx.canvasToTempFilePath
                // 儲存圖片到系統相簿  需要使用者授權 scope.writePhotosAlbum
                const wxSaveImageToPhotosAlbum = wx.saveImageToPhotosAlbum
                wxCanvasToTempFilePath({
                  canvasId: 'shareCanvas',
                  success: function(res) {
                    wxSaveImageToPhotosAlbum({
                      filePath: res.tempFilePath,
                      success(res) {
                        console.log('儲存好了')
                        wx.showToast({
                          title: '已儲存到相簿'
                        })   }   })  }
                }) } }) }  }})}};
複製程式碼

效果圖 （馬賽克一下原圖，嘿嘿）

注意

（1）如果使用網路圖片需要注意下載圖片的路由

（2）如果域名正確了，在模擬器上可以正常下載儲存，但是在真機上不可以正常下載儲存，可能是下載的伺服器上，需要安裝SSL證書；