canvas节点无法导出图片_uniapp canvas绘制图片后无法canvasToTempFilePath导出

在使用uniapp进行canvas绘图并尝试使用canvasToTempFilePath导出图片时,遇到错误。在小米9Rro 5G手机上,MIUI12开发版中,该问题100%出现。错误提示为TypeError,无法读取'data'属性。代码示例显示,即使降级uniapp版本,问题仍然存在。开发者怀疑问题可能与MIUI的Webview更新有关,期待官方调查解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

后续补充:锅应该来自MIUI升级,因为我将之前打包的App安装后,依旧有这个问题(之前测试的时候是不存在的)。。。 但是但是,依旧请官方看看小米到底给你们挖了什么坑,解决此问题。。。 小米 webview版本: 85.0.4183.101

在canvas中绘制图片后,无法 canvasToTempFilePath 导出图片,直接报错。

TypeError: Cannot read property 'data' of undefined at view.umd.min.js:1

另外,之前 2.8.11 版本也有此问题 ,降级到2.8.8之后依旧发生 。

其他手机不确定,但是小米9Rro 5G, MIUI12 开发板最新版本, 100%毕现。下方代码可以直接重现。

export default {

data() {

return {

canvasPic : ''

}

},

onLoad() {

},

methods: {

async downloadPic(url) {

return new Promise((resolve, reject) => {

uni.downloadFile({

url: url,

success: res => {

resolve(res.tempFilePath);

},

fail: () => {

reject('图片下载失败');

}

});

});

},

},

async mounted() {

let ctx = uni.createCanvasContext('posterCanvas');

ctx.setFillStyle('#0f0');

ctx.fillText("哈哈哈1", 30, 30);

let pic;

pic = '/static/logo.png';

ctx.drawImage(pic, 0, 0, 100, 100);

pic = await this.downloadPic('https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uniapp4@2x.png');

ctx.drawImage(pic, 100, 140, 200, 60);

ctx.draw(true, ()=>{

uni.canvasToTempFilePath({

canvasId: 'posterCanvas',

x: 0,

y: 0,

width: 320,

height: 240,

destWidth: 320,

destHeight: 240,

success: res => {

this.canvasPic = res.tempFilePath;

},

complete: (rs) => {

console.log('canvasToTempFilePath', rs)

}

});

});

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值