微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。

背景：

1.用户点击分享朋友圈，将二维码与一张背景图合成一张图片，然后将其显示。

2.用户点击保存图片将图片保存到手机相册里面。

问题：

用户点击分享盆友圈合成后的图片显示空白。控制台可以打印出来链接。

实现：

合成图片利用wx小程序api 结合canvas一起使用。这里就不多说了，直接看 官方文档。

主要原因就是上下文this导致的图片显示空白

  wx.canvasToTempFilePath({
                    canvasId: 'canvas',
                    success: (res) => {
                        console.log('获取二维码地址'+ res.tempFilePath)
                        const wxGetImageInfo = promisify(wx.getImageInfo)
                        Promise.all([
                            wxGetImageInfo({
                                src: that.data.imgsrc
                            }),
                            wxGetImageInfo({
                                // src: res.tempFilePath
                                src: app.globalData.qrcode_url
                            })
                        ]).then(res => {
                            const ctx = wx.createCanvasContext('shareCanvas', that)
                            ctx.drawImage(res[0].path, 0, 0, width, height)
                            const qrImgSize = 80
                          ctx.drawImage(res[1].path, width / 2 - 37, height - 116, qrImgSize, qrImgSize)
                            ctx.stroke()
                            ctx.draw()
                        })
                    },
                    complete: (res) => {
                        console.log('complete==', res)
                    }
                }, that)

canvasToTempFilePath({}, this)与createCanvasContext('', this)方法里面都要传this。问题就解决了

来源：CSDN

作者：腿毛1米5的欧巴

链接：https://blog.csdn.net/qq_35164962/article/details/90291751

标签

微信小程序