微信小程序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。问题就解决了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值