- 发布：2021-03-04 15:00
- 更新：2021-03-04 17:14
- 阅读：1018
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win 10 专业版64位 18363
HBuilderX类型： 正式
HBuilderX版本号： 3.1.4
手机系统： 全部
手机厂商： 华为
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
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)
}
})
},
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)
}
})
},操作步骤：
如描述
如描述
预期结果：
成功绘制生成图片
成功绘制生成图片
实际结果：
概率性空白
概率性空白
bug描述：
步骤：再nvue页面拍照拿到临时图片地址（用的相机插件，所以要在nvue页面执行），
跳转页面交给vue页面临时图片地址进行canvas绘图，draw函数加了两秒延迟用于canvas绘图时间，
再调用uni.canvasToTempFilePath生成图片，
华为Honor 9有小概率几率绘制空白，文字和图片都没有显示，
华为mete30大概率出现空白。
3***@qq.com
您好，可以说详细点吗
2021-05-13 11:37
3***@qq.com
我也遇到这种问题
2021-05-13 11:37