HTML5 canvas getImageData()执行失败

HTML5 canvas getImageData() failed to execute

本文关键字：执行 失败 canvas getImageData HTML5      更新时间：2023-09-26

当我使用getImageData()函数来获取chrome图像的数据时，它说Uncaught IndexSizeError:未能在'CanvasRenderingContext2D'上执行'getImageData':源宽度为0。下面是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>canvastest</title>
</head>
<body>
<img src="flower.jpg" hidden />
<canvas id="drawing" width="600" height="532">a drawing of something</canvas>
<script type="text/javascript" >
    var drawing = document.getElementById("drawing");
    if (drawing.getContext){
        var context = drawing.getContext("2d"),
            image = document.images[0],
            imageData,data,
            i,len,average,
            red,blue,green,alpha;
        image.onload = function(){
            context.drawImage(image,0,0);
        };
        imageData = context.getImageData(0,0,image.width,image.height);
        data = imageData.data;
        for (i=0,len=data.length;i<len;i+=4){
            red = data[i];
            green = data[i+1];
            blue = data[i+2];
            alpha = data[i+3];
            average = Math.floor((red + green + blue) / 3);
            data[i] = average;
            data[i+1] = average;
            data[i+2] = average;
        }
        imageData.data = data;
        context.putImageData(imageData,0,0);
    }
</script>
</body>
</html>

怎么会这样呢?如何解决这个问题?

您正在附加一个onload回调来实际绘制图像到画布。但是，只有当图像加载到DOM中并且必须从服务器获取图像时，才会触发此函数。在您尝试从画布中提取图像数据之前，是什么让您认为会发生这些事情呢?

这是混合同步和异步代码时的问题，有许多技术可以解决这个问题。但我敢打赌，如果您在调试器中设置一个断点，在绘制图像的行和试图读取图像的行，后者将在前者之前触发。

您要么需要将处理放在onload处理程序中(由于耦合不推荐)，要么使用类似承诺的东西来确保读取数据的代码在写入数据的代码之后运行。

如果不小心将0传递给width或height参数，也会出现该错误消息:

context.getImageData(0, 0, 0, 0); //Throws an IndexSizeError

无论这是由于打字错误还是一个坏变量，将0传递给第三或第四个参数总是会导致错误消息"源宽度是0."或"源高度为0。"

因此，与其这样做，你应该直接引用画布的宽度/高度:

context.getImageData(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

或者添加一个条件来检查以确保两个值都不是false:

if (my_width && my_height)
{
    context.getImageData(0, 0, my_width, my_height);
}
else
{
    alert('Invalid canvas width or height value!');
}
相关文章：