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绘制需要更长的等待时间才能完成。

建议修改方案:

  1. 将setTimeout的延迟时间增加到3000-5000ms,特别是对于性能较差的设备:
ctx.draw(true, setTimeout(function() {
    uni.canvasToTempFilePath({
        // 原有配置
    }, 3000))
}))
  1. 更好的做法是使用canvas的draw回调来确保绘制完成:
ctx.draw(false, function() {
    uni.canvasToTempFilePath({
        // 原有配置
    })
})
回到顶部