小程序商品详情生成分享海报，并保存到手机，（canvas 2D最新接口生成），特别注意如需要使用网络图片一定要提前配置小程序下载链接

先上链接（直接看下面这个文档就能生成基本的图片）：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

效果图：

直接上我写的比较low的代码，我是后端，别嫌弃~~：

1、首先准备商品二维码，二维码是接口生成的，返回的base64位图片地址，需要前端转换成临时图片地址。

2、商品详情图片是后端图片url，这里有一个坑，网络图片是需要先下载到本地，然后获取临时文件才可以供canvas使用，我之前开发的时候没有配置下载域名，导致开发工具正常保存，真机调试正常，体验版正常（其实不打开debug也不正常），就上线审核了，审核也通过了，结果线上的版本生成图片一直失败，开始用的老版本的图片生成，以为是停止维护，直接也不能使用，又重新接入新版canvas 2D API，最后有一次体验版关闭了debug才发现也不行，最后看到社区有人反馈是没有配置下载域名。。。配置上线上版本也好了。。。

注意：模板小程序，需要在第三方平台配置域名，小程序才可以设置否则会报错：第三方平台-》开发配置-》开发资料-》中的《小程序服务器域名》，这里可以配置服务器域名，也可以配置下载域名，没有单独的设置下载域名

3、下面有绘制图片的方法，其实图片可以封装一个，偷懒了。。。

	  createNewImg: function () {
        var _this = this;
        wx.createSelectorQuery()
            .select('#myCanvas') // 在 WXML 中填入的 id
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node
                // Canvas 画布的实际绘制宽高
                const renderWidth = res[0].width
                const renderHeight = res[0].height
                // Canvas 绘制上下文
                const context = canvas.getContext('2d')


                // 初始化画布大小
                const dpr = wx.getWindowInfo().pixelRatio
                canvas.width = renderWidth * dpr
                canvas.height = renderHeight * dpr
                context.scale(dpr, dpr)
                context.clearRect(0, 0, canvas.width, canvas.height)
                
                //开始绘图
                context.fillStyle = '#FFF';
                context.fillRect(0, 0, 600, 900);
                //这里是商品图片
                const goodImage = canvas.createImage();
                goodImage.src = _this.data.img;
                goodImage.onload = () => {
                    context.drawImage(goodImage, 0, 0, 600, 600); 
                }
                _this.setTitle(context);//设置商品名称
                _this.setName(context);//设置副标题
                _this.setMoney(context);//设置价格
                //这里是二维码图片
                const qrImage = canvas.createImage();
                qrImage.src = _this.data.ewm;
                qrImage.onload = () => {
                    context.drawImage(qrImage, 410, 638, 145, 145); 
                }
                //这里是底部指导语图片
                const btImage = canvas.createImage();
                btImage.src = '../../images/canvast.png';
                btImage.onload = () => {
                    context.drawImage(btImage, 0, 815, 600, 90);  
                }
                setTimeout(function () {
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        width: 600,
                        height: 900,
                        destWidth: 600 * _this.data.ratio,
                        destHeight: 900 * _this.data.ratio,
                        quality: 1,
                        canvas: canvas,
                        success: function (res) {
                            $.hideloading();
                            wx.saveImageToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success: function () {
                                    _this.setData({
                                        imagePath: res.tempFilePath,
                                    }, () => {
                                        wx.showToast({
                                            title: "已保存到相册!",
                                        })
                                    });
                                },
                                fail: function (res) {
                                   
                                }
                            })
                        }
                    })
                }, 100)
            })
    },

    //将金额绘制到canvas
    setMoney: function (context) {
        var money = `￥${this.data.goodinfo.goods_price}`;
        context.fillStyle = "#c33";
        context.font = '500 34px sans-serif';
        context.fillText(money, 44, 780);
    },