uni-app uni.canvasToTempFilePath 有几率绘制空白
uni-app uni.canvasToTempFilePath 有几率绘制空白
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win 10 专业版64位 18363 | HBuilderX |
产品分类:uniapp/App
<h2>测试过的手机:</h2>
华为mete30,华为Honor 9,苹果8
<h2>示例代码:</h2>
```cpp
handleImage(tempFilePaths) {
this.yyy = tempFilePaths;
uni.showLoading({
title:'图片处理中...',
mask:true
})
console.log('图片',tempFilePaths);
let that = this;
uni.getImageInfo({
src: tempFilePaths,
success: function(res) {
//图片原始长宽
var canvasWidth = res.width ;
var canvasHeight = res.height;
that.canvasWidth = res.width;
that.canvasHeight = res.height;
console.log('宽高',res.width,res.height);
//----------绘制图形并取出图片路径--------------
var ctx = uni.createCanvasContext('canvas');
ctx.drawImage(res.path, 0, 0, canvasWidth+30, canvasHeight+30);
ctx.setFontSize(80);
ctx.setFillStyle('red');
for (let i = 1;(i - 1) * 25 < getApp().globalData.orderMess.address.length; i++) {
let start = 25 * (i - 1);
let end = 25 * i;
ctx.fillText(getApp().globalData.orderMess.address.substring(start, end), 10, (50 + 120 * i))
}
let nowTime = that.getTimeFormat();
getApp().globalData.orderMess.phoneSendTime = nowTime;
ctx.fillText(nowTime, 10, 90);
ctx.draw(true, setTimeout(function() {
uni.canvasToTempFilePath({
canvasId: 'canvas',
destWidth: canvasWidth,
destHeight:canvasHeight,
fileType: 'jpg',
quality: 0.75,
success: function(res) {
console.log('最终路径',res) //最终图片路径
that.xxx = res.tempFilePath;
uni.hideLoading()
that.xxx = res.tempFilePath;
uni.reLaunch({
url: './photograph?canvasImg='+res.tempFilePath
});
},
fail: function(res) {
console.log('错误',res.errMsg)
}
})
}, 2000))
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
fail: function(res) {
console.log(res.errMsg)
}
<h2>操作步骤:</h2>
如描述
<h2>预期结果:</h2>
成功绘制生成图片
<h2>实际结果:</h2>
概率性空白
<h2>bug描述:</h2>
步骤:再nvue页面拍照拿到临时图片地址(用的相机插件,所以要在nvue页面执行),跳转页面交给vue页面临时图片地址进行canvas绘图,draw函数加了两秒延迟用于canvas绘图时间,再调用uni.canvasToTempFilePath生成图片,华为Honor 9有小概率几率绘制空白,文字和图片都没有显示,华为mete30大概率出现空白。
更多关于uni-app uni.canvasToTempFilePath 有几率绘制空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
找到问题了,因为<cancas>标签再次赋值,去掉之后就没有发生了
更多关于uni-app uni.canvasToTempFilePath 有几率绘制空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
您好,可以说详细点吗
我也遇到这种问题
这是一个已知的uni-app在Android设备上的canvas绘制问题。主要原因是在某些Android设备上,canvas绘制需要更长的等待时间才能完成。
建议修改方案:
- 将setTimeout的延迟时间增加到3000-5000ms,特别是对于性能较差的设备:
ctx.draw(true, setTimeout(function() {
uni.canvasToTempFilePath({
// 原有配置
}, 3000))
}))
- 更好的做法是使用canvas的draw回调来确保绘制完成:
ctx.draw(false, function() {
uni.canvasToTempFilePath({
// 原有配置
})
})