總結：小程序canvas遇到的坑

項目需要

從后台返回的二維碼和背景圖片返回到前端，前端把各個字段值畫在canvas上生成海報，要在畫布上添加二維碼，可保存在本地。

第一個坑 這里從后台傳過來的圖片為網絡圖片需要先轉化為本地的，看開發者工具文檔用wx.getImageInfo 的方法可以轉換，canvas 的draw方法默認為 false 也就是不保存之前所畫的內容，因為我的文字和二維碼都需要寫在背景圖上，所以改為 true 。

注意繪制的順序，先把背景圖底圖畫上，然后是文字或者其他的，

wx.getImageInfo({
    //that.data.preImg是我后台返回過來的動態數據二維碼
    src: 'http://www域名.com'+that.data.preImg,
    success: function (res) {
        context.drawImage(res.path, 270, 560, 80,80);
        that.creatText(context);//繪制文字的方法
        context.draw(true);//保存之前繪制的
    }
})

然后相應的在

第二個坑 canvas 畫布的繪制是不分先后的我的背景圖片會把文字覆蓋掉，在這里我把需要繪制的文字寫在另外一個方法中，然后在 wx.getImageInfo 方法成功后調用這個方法，要把 context 傳進去：

var context = wx.createCanvasContext('mycanvas');

第三個坑 就是后台的背景圖片是從數據可拿過來的為image 類型，在后台轉化為base64傳到前端，我需要把base64轉化為可以顯示的圖片，從網上找了好多方法都是直接顯示在頁面上，

<img src="data:image/png;base64,{{img}}"/>

而這個不是我要的結果，又找到了這個方法：

 //將后台傳過來的海報背景base64格式轉化為圖片
base64src:function(code,cb){
    const fsm = wx.getFileSystemManager();
    const timestamp = Date.parse(new Date())
    // 自定義文件名
    const FILE_BASE_NAME = 'tmp_base64src' + timestamp
    // 文件系統中的用戶目錄路徑 （本地路徑）
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
    // 將 base64 字符串轉成 ArrayBuffer 對象
    const buffer = wx.base64ToArrayBuffer(code)
    //同步
    fsm.writeFileSync(
        filePath,
        buffer,
        'base64'
    )
    cb(filePath)
    this.setData({
        bgIMg:filePath
    })
    //異步
 	// fsm.writeFile({
    //   filePath: filePath,
    //   data: buffer,
    //   encoding: 'base64',
    //   success: (res)=>{
    //     cb(filePath)
    //     this.setData({
    //       bgIMg:filePath
    //     })
    //   }
    // })
}

注意： 前端繪制的一個弊端就是圖片生成時間太長，要base64轉圖片，還要繪制圖畫；后端繪制可能效果排版沒有前端那么好。

生成圖片保存到本地並顯示到頁面上(因為繪制圖畫時間較長，保存時需要setTimeout延長一下)

setTimeout(function () {
    wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
            var tempFilePath = res.tempFilePath;//圖片地址
            that.setData({
                imagePath: tempFilePath,
                canvasHidden:true
            });
        },
        fail: function (res) {
            console.log(res);
        }
    });
},1000);

第四個坑 小程序長按圖片並不能保存，需要額外的寫一個方法保存到本地相冊 wx.saveImageToPhotosAlbum

var that = this
wx.saveImageToPhotosAlbum({
    filePath: that.data.imagePath,
    success(res) {
        wx.showModal({
            content: '圖片已保存到相冊，趕緊曬一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
                if (res.confirm) {
                // console.log('用戶點擊確定');
                /* 該隱藏的隱藏 */
                    that.setData({
                        maskHidden: false
                    })
                }
            },fail:function(res){
           		console.log(res)
            }
        })
    }	
})

好了，繪制小程序海報到此為止了，有很多問題是可以在開發文檔中找到方法解決的，微信開放社區 里邊的大神還是挺多的可以問他們，期待微信小程序的完善。👍