從後台返回的(de)二維碼和(hé / huò)背景圖片返回到(dào)前端，前端把各個(gè)字段值畫在(zài)canvas上(shàng)生成海報，要(yào / yāo)在(zài)畫布上(shàng)添加二維碼，可保存在(zài)本地(dì / de)。 

第一個(gè)坑 這(zhè)裏從後台傳過來(lái)的(de)圖片爲(wéi / wèi)網絡圖片需要(yào / yāo)先轉化爲(wéi / wèi)本地(dì / de)的(de)，看開發者工具文檔用wx.getImageInfo 的(de)方法可以(yǐ)轉換，canvas 的(de)draw方法默認爲(wéi / wèi) false 也(yě)就(jiù)是(shì)不(bù)保存之(zhī)前所畫的(de)内容，因爲(wéi / wèi)我的(de)文字和(hé / huò)二維碼都需要(yào / yāo)寫在(zài)背景圖上(shàng)，所以(yǐ)改爲(wéi / wèi) true 。

注意繪制的(de)順序，先把背景圖底圖畫上(shàng)，然後是(shì)文字或者其他(tā)的(de)，

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

然後相應的(de)在(zài)

第二個(gè)坑 canvas 畫布的(de)繪制是(shì)不(bù)分先後的(de)我的(de)背景圖片會把文字覆蓋掉，在(zài)這(zhè)裏我把需要(yào / yāo)繪制的(de)文字寫在(zài)另外一個(gè)方法中，然後在(zài) wx.getImageInfo 方法成功後調用這(zhè)個(gè)方法，要(yào / yāo)把 context 傳進去：

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

第三個(gè)坑 就(jiù)是(shì)後台的(de)背景圖片是(shì)從數據可拿過來(lái)的(de)爲(wéi / wèi)image 類型，在(zài)後台轉化爲(wéi / wèi)base64傳到(dào)前端，我需要(yào / yāo)把base64轉化爲(wéi / wèi)可以(yǐ)顯示的(de)圖片，從網上(shàng)找了(le／liǎo)好多方法都是(shì)直接顯示在(zài)頁面上(shàng)，

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

而(ér)這(zhè)個(gè)不(bù)是(shì)我要(yào / yāo)的(de)結果，又找到(dào)了(le／liǎo)這(zhè)個(gè)方法：

 //将後台傳過來(lái)的(de)海報背景base64格式轉化爲(wéi / wèi)圖片
base64src:function(code,cb){
    const fsm = wx.getFileSystemManager();
    const timestamp = Date.parse(new Date())
    // 自定義文件名
    const FILE_BASE_NAME = 'tmp_base64src' + timestamp
    // 文件系統中的(de)用戶目錄路徑 （本地(dì / de)路徑）
    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
    //     })
    //   }
    // })
}

注意： 前端繪制的(de)一個(gè)弊端就(jiù)是(shì)圖片生成時(shí)間太長，要(yào / yāo)base64轉圖片，還要(yào / yāo)繪制圖畫；後端繪制可能效果排版沒有前端那麽好。

生成圖片保存到(dào)本地(dì / de)并顯示到(dào)頁面上(shàng)(因爲(wéi / wèi)繪制圖畫時(shí)間較長，保存時(shí)需要(yào / yāo)setTimeout延長一下)

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

第四個(gè)坑 小程序長按圖片并不(bù)能保存，需要(yào / yāo)額外的(de)寫一個(gè)方法保存到(dào)本地(dì / de)相冊 wx.saveImageToPhotosAlbum

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

好了(le／liǎo)，繪制小程序海報到(dào)此爲(wéi / wèi)止了(le／liǎo)，有很多問題是(shì)可以(yǐ)在(zài)開發文檔中找到(dào)方法解決的(de)，微信開放社區 裏邊的(de)大(dà)神還是(shì)挺多的(de)可以(yǐ)問他(tā)們，期待微信小程序的(de)完善。