uni.canvasToTempFilePath({
canvasId:this.id,
success:(e)=>{
console.log(e)
},
fail:(e)=>{
console.log(e)
}
},this)
c***@163.com
- 发布：2021-11-19 17:42
- 更新：2021-12-07 16:41
- 阅读：2313
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.14
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： 无
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
uni.canvasToTempFilePath({
canvasId:this.id,
success:(e)=>{
console.log(e)
},
fail:(e)=>{
console.log(e)
}
},this)
uni.canvasToTempFilePath({
canvasId:this.id,
success:(e)=>{
console.log(e)
},
fail:(e)=>{
console.log(e)
}
},this)预期结果：
返回正常
返回正常
实际结果：
fail canvas is empty
fail canvas is empty
bug描述：
编译到 微信小程序
vue3 在 组件 中使用 uni.canvasToTempFilePath 时，报错 fail: canvas is empty
同样情况下直接使用 wx.canvasToTempFilePath ，符合预期
Releases v3.2.12 Alpha v3.2.14,这两个版本都有同样问题
//昨晚也碰到这个 canvas is empty 的问题，读到某篇文章后解决的。希望能帮到后面的人
//以下是代码
const context = uni.createCanvasContext('canvas1', this);
var picBGUrl = 'http://...';
uni.getImageInfo({
src: picBGUrl,
success: function(res) {
//背景
context.drawImage(res.path,0,0,300,400);
context.save();
//写字
context.setFontSize(16);
context.setFillStyle("#111111");
context.fillText(‘write words’,58,107);
context.save();
//这边是关键！！！
context.draw(true,()=>{
uni.canvasToTempFilePath({
canvasId: 'canvas1',
success: function(res) {
_this.tempImg = res.tempFilePath;
console.log("Canvas:"+res.tempFilePath)
},
fail: function(res) {
console.log("fail!!!"+JSON.stringify(res));
}
});
});
}
});
c***@163.com (作者)
存在的，而且只有一个canvas,所在行如下：
<canvas @longpress="lp" :canvas-id="id" :id="id"/ >
2021-11-24 16:30
DCloud_UNI_Anne
回复 c***@163.com: 是微信小程序吗？可提供一个简单可复现的示例（上传附件），方便我们排查哦
2021-11-24 16:54
c***@163.com (作者)
回复 DCloud_UNI_Anne: 附件已添加，问题也找到了是vue3+组件会出现，非组件或者非vue3不会出现
2021-11-25 10:49
DCloud_UNI_Anne
回复 c***@163.com: 温馨提示：反馈bug时注意正确选择vue版本以及相关平台信息，方便快速定位问题
2021-11-25 17:39