收藏
回答

canvas 生成图片后,在image标签展示展示生成的图片在安卓大概率出现黑屏

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 6.7.4 2.4.1

- 当前 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  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

5 个回答

  • 是柿子啊
    是柿子啊
    2018-11-30

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-30
    赞同
    回复 1
    • 【实用记事本】小程序
      【实用记事本】小程序
      05-21

      截至目前还未解决,安卓还会复现

      05-21
      1
      回复
  • 桌子凳子丫
    桌子凳子丫
    04-11

    遇到同样的问题,目前的解决方案是在所有的绘制之前,先给画布上填充自己想要的颜色,再进行后续操作。canvasToTempFilePath的时候做个延迟。导出jpg格式

    04-11
    赞同
    回复
  • 啦啦啦
    啦啦啦
    2018-12-07

    我这是在安卓手机上生成的图片放在image中都是白色的(不知道是不是透明的),在开发工具中部分图片导出的是可以显示,还有部分的也是像安卓中是白色或透明,难道这和图片有关系?

    2018-12-07
    赞同
    回复
  • 微盟
    微盟
    2018-11-30

    我们在开发中也有遇到这个问题,解决方法是在每次ctx.save()之前都把包括ctx.save()和接下来的所有步骤全部放入setTimeout内,并且延迟500毫秒。

    2018-11-30
    赞同
    回复 2
    • SL
      SL
      02-28

      我用的echarts的地图,在canvas转img时也碰到了这个问题。但是ctx.save()是echarts封装好的,我只能把ctx.draw()以及之后的操作放在延迟里,但安卓机还是大概率黑屏。请问大神知道怎么解决吗?

      02-28
      回复
    • Karl
      Karl
      09-06
      我用的200毫秒跪了还是有人出现
      09-06
      回复
  • 晓布
    晓布
    2018-11-30

    demo的例子是https://developers.weixin.qq.com/s/uFp3vjmM7s4J,唯一的不同是我使用的图片是网络的,这个因为账号原因放在了本地,网络图片用的canvas.js 中的getImageInfo方法获取,其他的都是一样的。这个在安卓机器上都会出现黑图。


    2018-11-30
    赞同
    回复