微信小程序码生成及canvas绘制

吐槽：某厂的开发文档写的跟屎一样

1、后台返回accessToken，小程序请求获取小程序码

uni.request({
        url: \'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=\' + res.data.accessToken,
        method: \'POST\',
        headers: {
                \'Content-Type\': \'json\'
        },
        responseType: \'arraybuffer\',
        data: {                                                 
                "scene": "a=1", // 参数
                "is_hyaline": true //透明底色
        },
        success: (res) => {
                // 将返回的图片buffer生成图片，并保存至临时用户文件中
                const fs = wx.getFileSystemManager();
                const FILE_BASE_NAME = \'code\';
                let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
                fs.writeFileSync(filePath, res.data)
                // filePath就是图片的本地路径
                that.filePath = filePath
                that.qrcode(filePath)
        },
        fail(e) {
                console.log(e)
        }
});

2、将生成的小程序码绘制到海报上 --- canvas

 let that = this
        const query = wx.createSelectorQuery()
        query.select(\'#myCanvas\')
                .fields({
                node: true,
                size: true
                })
                .exec((res) => {
                                                
                        const canvas = res[0].node
                        const ctx = canvas.getContext(\'2d\')

                        const headerImg = canvas.createImage();
                        const backImg = canvas.createImage();

                        headerImg.src = that.filePath;
                        backImg.src = \'../../static/wish.png\';

             backImg.onload = () => {
                                ctx.drawImage(backImg, 0, 0, 150, 100)
                        }       

                        headerImg.onload = () => {
                                ctx.drawImage(headerImg, 0, 0, 150, 100)
                        }                                                                                       
        })
                                

3、将生成的小程序码绘制到海报上 --- canvas离屏绘制

// 创建离屏 2D canvas 实例
                                const canvas = wx.createOffscreenCanvas({
                                        type: \'2d\',
                                        width: 300,
                                        height: 150
                                })
                                // 获取 context。注意这里必须要与创建时的 type 一致
                                const context = canvas.getContext(\'2d\')
                                // 创建一个图片
                                const image = canvas.createImage()
                                // 等待图片加载

                                image.src = \'../../static/wish.png\' // 要加载的图片 url
                                image.onload = () => {
                                        // 把图片画到离屏 canvas 上
                                        context.clearRect(0, 0, 300, 150)
                                        context.drawImage(image, 0, 0, 300, 150)

                                        // 获取画完后的数据
                                        const imgData = context.getImageData(0, 0, 300, 150)
                                        console.log(imgData)
                                        // 图片的base64格式
                                        console.log(context.canvas.toDataURL())
                                        that.src = context.canvas.toDataURL()
                                }