demo的例子是https://developers.weixin.qq.com/s/uFp3vjmM7s4J,唯一的不同是我使用的图片是网络的,这个因为账号原因放在了本地,网络图片用的canvas.js 中的getImageInfo方法获取,其他的都是一样的。这个在安卓机器上都会出现黑图。
canvas 生成图片后,在image标签展示展示生成的图片在安卓大概率出现黑屏- 当前 Bug 的表现(可附上截图) canvas 生成图片后,在image标签展示展示生成的图片在安卓大概率出现黑屏 图片的获取都成功了,将canvas 组件显示出来发现画的是没有问题的,但是获取的图片展示确实黑色的。获取图片的方法已经延时2s。 - 预期表现 - 复现路径 - 提供一个最简复现 Demo var widthPercent = this.data.getSystemInfo.windowWidth / 375; var that = this let ctx = wx.createCanvasContext('ewmCanvas'); // 画背景图片 let bgimageurl = that.data.sharemsg.picInfo.picUrl canvas.getImageInfo(bgimageurl, function (res) { console.log("图片1",res) // ctx.save() ctx.drawImage(res.path, 0, 0, 345 * widthPercent, 255 * widthPercent) // ctx.restore() // 画头像 let iconimageUrl = that.userInfo.imageUrl canvas.getImageInfo(iconimageUrl, function (res) { console.log("图片2", res) ctx.save() ctx.arc(40 * widthPercent, 40 * widthPercent, 20, 0, Math.PI * 2, false); ctx.clip(); ctx.drawImage(res.path, 20 * widthPercent, 20 * widthPercent, 40 * widthPercent, 40 * widthPercent) ctx.restore() // 设置昵称 ctx.save(); ctx.setFontSize(16 * widthPercent) ctx.setFillStyle('rgb(255, 255, 255)') ctx.fillText(that.userInfo.name, 70 * widthPercent, 46 * widthPercent) ctx.restore() // 设置文字标题 ctx.save(); ctx.setFontSize(28 * widthPercent) ctx.setTextAlign('center') ctx.setFillStyle('rgb(255, 255, 255)') ctx.setShadow(1, 1, 3, 'rgba(0, 0, 0, 0.2)') ctx.fillText(that.data.sharemsg.picInfo.title, 172.5 * widthPercent, 235 * widthPercent) ctx.restore() //设置底部白色背景 ctx.save(); ctx.beginPath() ctx.rect(0, 255 * widthPercent, 345 * widthPercent, 90 * widthPercent) ctx.setFillStyle('#ffffff') ctx.fill() ctx.restore() // 设置二维码 var ewmImageUrl = that.data.sharemsg.picInfo.codeUrl canvas.getImageInfo(ewmImageUrl, function (res) { console.log("图片3", res) // ctx.save() ctx.drawImage(res.path, 10 * widthPercent, 260 * widthPercent, 80 * widthPercent, 80 * widthPercent) // ctx.restore() //设置顶部说明 ctx.save() ctx.font = 'normal bold 18px sans-serif'; ctx.setFontSize(18 * widthPercent) ctx.setFillStyle('rgb(51, 51, 51)') // ctx.setTextAlign('center') ctx.fillText(that.data.sharemsg.picInfo.codeTitle, 98 * widthPercent, 294 * widthPercent) ctx.restore() // 底部说明 ctx.setFontSize(16 * widthPercent) ctx.setFillStyle('rgb(102, 102, 102)') ctx.fillText(that.data.sharemsg.picInfo.codeSubTitle, 98 * widthPercent, 322 * widthPercent) ctx.draw(false,function(){ setTimeout(function(){ canvas.canvasToTempFilePath('jpg', 'ewmCanvas', function (res) { wx.hideToast() var url = res.tempFilePath; if (that.data.shareimageUrl == "set") { that.data.sharemsg.show = true that.setData({ sharemsg: that.data.sharemsg, shareimageUrl: url, }) } else { that.setData({ shareimageUrl: url, }) } }) },2000) }) },function(res){ that.data.shareimageUrl == "" }) }, function (res) { that.data.shareimageUrl == "" }); }, function (res) { that.data.shareimageUrl == "" });
2018-11-30