uni-app 【报Bug】content.drawimage后 getimagedata返回为空数据

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 【报Bug】content.drawimage后 getimagedata返回为空数据

开发环境 版本号 项目创建方式
Windows win10 专业版 HBuilderX 
产品分类：uni-app x/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10 专业版

HBuilderX类型：正式

HBuilderX版本号：4.28

手机系统：Android

手机系统版本号：Android 13

手机厂商：华为

手机机型：mate60

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```javascript
uni.getImageInfo({
src: this.authorbackpic,
success: res => {
// 异步调用方式, 跨平台写法
uni.createCanvasContextAsync({
id: 'bgcolor',
component: this,
success: (context : CanvasContext) => {
this.renderingContext = context.getContext('2d')!
}
})
})  

const context = this.renderingContext!  
console.log('context',context)  
const image = new Image(100, 100);  
image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'  
image.onload = () => {  
context.drawImage(image, 0, 0, 100, 100)  
context.save()  
let datadots = context.getImageData(0,0,100,100)  
console.log('datadots',datadots)  
}  
console.log('-------context',context)                             
console.log('---',res)  
}

返回数据如下

//‍[⁠io.dcloud.canvas.ImageDataImpl⁠]‍
{
"data":
//‍[⁠io.dcloud.uts.Uint8ClampedArray⁠]‍
{},
"height":
//‍[Int]‍
100,
"width":
//‍[Int]‍
100
}

为啥data是空对象呢

操作步骤：

放一个canvas控件
`<canvas ref="refbgcolor" id="bgcolor"></canvas>`
复制上面的代码放到一方法里面 点击调用就行

预期结果：

data为数组集合

实际结果：

返回空对象

bug描述：

先drawimage 然后再getimage的得到的data数据为空

Harmonyos Next教程
1 回复

在处理uni-app中的canvas相关操作时，drawImage后getImageData返回为空数据的问题，通常与绘制时机、图像加载状态以及canvas的上下文状态有关。以下是一个可能的代码示例，以及确保getImageData能正确获取到数据的注意事项和修正方法。

示例代码

// 假设我们有一个canvas组件，id为myCanvas
const canvasId = 'myCanvas';
const ctx = uni.createCanvasContext(canvasId);

// 加载图片，并在加载完成后进行绘制和获取图像数据
uni.getImageInfo({
    src: 'https://example.com/path/to/your/image.png', // 替换为你的图片路径
    success: function(imageInfo) {
        // 绘制图片到canvas
        ctx.drawImage(imageInfo.path, 0, 0, canvasWidth, canvasHeight);
        ctx.draw(false, function() {
            // 确保绘制完成后再获取图像数据
            uni.canvasToTempFilePath({
                canvasId: canvasId,
                success: function(res) {
                    // 这里通常不需要直接获取imageData，因为已经转为了文件路径
                    // 但为了演示，我们仍然尝试在绘制完成后立即获取imageData
                    setTimeout(() => {
                        try {
                            const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
                            console.log('ImageData:', imageData);
                        } catch (error) {
                            console.error('Failed to get imageData:', error);
                        }
                    }, 100); // 适当延时以确保绘制完成
                },
                fail: function(err) {
                    console.error('Failed to convert canvas to temp file path:', err);
                }
            });
        });
    },
    fail: function(err) {
        console.error('Failed to get image info:', err);
    }
});

// 注意：canvasWidth和canvasHeight需要根据你的canvas尺寸来设置
// 例如：const canvasWidth = 300; const canvasHeight = 300;

注意事项

  1. 确保图片加载完成：在drawImage之前，必须确保图片已经加载完成，使用uni.getImageInfo来获取图片的本地路径。
  2. 绘制完成回调：ctx.draw的第二个参数是一个回调函数，它会在绘制完成后执行。确保在这个回调中调用getImageData。
  3. 上下文状态：确保ctx的状态是正确的，没有在其他地方被修改或重置。
  4. 异步处理：由于图像加载和绘制都是异步操作，使用适当的延时（如setTimeout）或事件监听来确保操作顺序。

通过上述代码和注意事项，你应该能够解决drawImage后getImageData返回为空数据的问题。如果问题依旧存在，请检查canvas组件的尺寸设置、图片路径的有效性以及其他可能影响绘制和获取数据的因素。

回到顶部