微信小程序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.tempFilePathsrc: app.globalData.qrcode_url})]).then(res => {const ctx = wx.createCanvasContext('shareCanvas', that)ctx.drawImage(res[0].path, 0, 0, width, height)const qrImgSize = 80ctx.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。问题就解决了

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

微信小程序 canvas 合成海报
1.先百度了解canvas相关文档: 2.了解微信小程序授权登录与授权登录下保存图片权限问题: 3.canvas标签属性不能是display:none: <canvas class=" ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
微信小程序 canvas画布渲染云存储的图片
[已解决]问题: 在云开发小程序过程种,用canvas画布渲染云存储的图片,发现不能显示.用http带头的网络图片是可以显示的,用cloud带头的云存储图片就是不行.http带头的网络图片可以展示, ...
微信小程序canvas商品分享海报
先上效果图 1.wxml <button class="footer-item" bindtap="creatShareImageTap">分享&l ...
微信小程序Canvas绘制图案（生成海报、朋友圈海报）
现在小程序生成海报是很常见的,例如生成打卡海报.生成文案.生成宣传图.生成推广图等,都是少不了一个技术,就是图片绘制,有些是通过前端Canvas绘制,有些是通过后端绘制,当然前端Canvas绘制是比较 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...

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

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

最新文章

热门文章