<template>
<view class="content">
<image class="logo" :src="canvasPic" style="background-color: #fcc;"></image>
<canvas canvas-id="posterCanvas" style="width:320px;height:240px;background: #ccf;"></canvas>
</view>
</template>
<script>
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)
}
});
});
}
}
</script>
z***@gmail.com
- 发布：2020-09-16 19:14
- 更新：2021-11-25 18:32
- 阅读：2220
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.8.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 小米9Pro 5G
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
canvas正常生成最终图片
canvas正常生成最终图片
实际结果：
js报错 ，图片生成失败
js报错 ，图片生成失败
bug描述：
后续补充：锅应该来自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%毕现。下方代码可以直接重现。
<template>
<view class="content">
<image class="logo" :src="canvasPic" style="background-color: #fcc;"></image>
<canvas canvas-id="posterCanvas" style="width:320px;height:240px;background: #ccf;"></canvas>
</view>
</template>
<script>
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)
}
});
});
}
}
</script>
最佳回复
我运气比你好，我2.8.8可以导出来，2.8.11完全不能用，看更新日志说2.8.11优化了加载速度，我看来，这是负向优化。
早上提了问题也没人回复
-
-
-
-
-
我也不可以，华为mate20不可以。也是报TypeError: Cannot read property 'data' of undefined at view.umd.min.js:1
2020-09-22 18:17
使用 canvasToTempFilePath 方法生成图片，触发就报错[object DOMException] at view.umd.min.js:1
HB 的版本是3.2.9.20210927 的
this.canvas_text = this.shangbiao_text;
const ctx = uni.createCanvasContext('imgCanvas');
ctx.font = 'bold 18rpx serif'
ctx.setTextAlign('center')
ctx.setFillStyle("#000000")
ctx.fillText(this.canvas_text, this.windowWidth 0.55 / 2, 60, this.windowWidth 0.55)
ctx.draw(true,
() => {
setTimeout(function() {
uni.canvasToTempFilePath({
canvasId: 'imgCanvas',
// fileType: 'png',
x: 0,
y: 0,
width: 6,
height: 100,
destWidth: 6,
destHeight: 100,
success: function(res) {
console.log(res,"pppp")
// console.log(res.tempFilePath)
// this.imgPath = res.tempFilePath
// return
// console.log(this.imgPath)
// 在这里保存图片
},
fail: function(error) {
console.log(error,"////////")
}
})
}, 100)
})
设置代码
chenli
cli版本v2.0.0-alpha-28920200911001 这个修复是不是已经解决此问题了？github commit
2020-09-17 11:50
DCloud_UNI_GSQ
回复 chenli: 使用 2.0.0-alpha-28920200917001
2020-09-17 12:06