模拟器调试基础库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)
},
display:none;去掉,改为top:-9999px试试