收藏
回答

模拟器上Canvas绘图正常,真机上报错,什么情况?

模拟器调试基础库2.6.6,从服务器下载背景和头像绘制分享图,模拟器上可正常弹出分享图。

真机预览时,报cavasToTempFilePath:fail canvas is empty。经验证图片均已正常下载至临时文件,有wxfile://tmp_xxxxxxxxx的链接,往canvas上绘制时canvas上没有效果,保存时报错。(模拟器上一切正常)

HTML

<canvas type="2d" canvas-id="myCanvas" style="display:none;width:310px;height:510px;background:#ffffff;"></canvas>

JS:

savePoster: function() {

var that = this;

// 开始画图

const ctx = wx.createCanvasContext('myCanvas')

// 画背景

ctx.drawImage(that.data.downloadPoster, 0, 0, 310, 510);

// 画头像

ctx.save()

ctx.beginPath()

ctx.arc(80, 90, 32, 0, 2 * Math.PI)

ctx.clip()

ctx.drawImage(that.data.downloadHeaderImage, 48, 58, 64, 64)

ctx.restore()

// 写昵称

ctx.setFontSize(14)

ctx.textAlign = "center"

ctx.setFillStyle("#272727")

ctx.setStrokeStyle('#272727')

ctx.fillText(that.data.nickName, 80, 140, 84)

ctx.draw()

//保存临时文件

setTimeout(function() {

wx.canvasToTempFilePath({

canvasId: 'myCanvas',

fileType: 'png',

x: 0,

y: 0,

width: 310,

height: 510,

destWidth: 310,

destHeight: 510,

success: function(res) {

console.log(res.tempFilePath)

wx.getImageInfo({

src: res.tempFilePath,

success: function(res) {

console.log(res)

}

}),

wx.hideLoading();

that.setData({

postUrl: res.tempFilePath,

showPosterImage: true

});

},

fail: function(error) {

console.log("save fail=" + error.errMsg)

}

})

}, 2000)


},



回答关注问题邀请回答
收藏

1 个回答

  • Admin ²º²³
    Admin ²º²³
    2020-05-31

    display:none;去掉,改为top:-9999px试试

    2020-05-31
    有用
    回复 3
    • Metamorphosis
      Metamorphosis
      2020-05-31
      不行呢,我把canvas显示出来,模拟器上可以看到绘制过程,真机上canvas一直是初始状态,图就没画成功,感觉是没有获取到canvas的context,但是canvas-id是对的
      2020-05-31
      回复
    • Metamorphosis
      Metamorphosis
      2020-05-31
      模拟器基础库升到新版以后,也画不出图了
      2020-05-31
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-05-31回复Metamorphosis
      看了代码,2d模式后不是这样用的:ctx.drawImage(that.data.downloadPoster, 0, 0, 310, 510);参考代码:https://developers.weixin.qq.com/s/SHfgCmmq7UcM
      2020-05-31
      回复
登录 后发表内容
问题标签