项目需要

从后台返回的二维码和背景图片返回到前端，前端把各个字段值画在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)
            }
        })
    }	
})

好了，绘制小程序海报到此为止了，有很多问题是可以在开发文档中找到方法解决的，微信开放社区 里边的大神还是挺多的可以问他们，期待微信小程序的完善。