HTML5 画布 getImageData() 无法工作

Question

当我使用 getImageData() 函数获取带有 chrome 的图像的数据时，它说 Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 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>

怎么会发生？ 以及如何解决？

Answer 1

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

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

您需要将处理放在onload处理程序中（因为耦合而不推荐）或者使用类似promise的方法来确保读取数据的代码在写入代码之后运行。

Answer 2

如果您不小心将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);

或者添加一个条件来检查以确保两个值都不是假的：

if (my_width && my_height)
{
    context.getImageData(0, 0, my_width, my_height);
}

else
{
    alert('Invalid canvas width or height value!');
}

HTML5 画布 getImageData() 无法工作

问题描述

2 个解决方案

解决方案1
5 已采纳 2015-10-22 13:07:57

解决方案2
0 2022-01-17 11:52:05

HTML5 画布 getImageData() 无法工作

问题描述

2 个解决方案

解决方案1 5 已采纳 2015-10-22 13:07:57

解决方案2 0 2022-01-17 11:52:05

解决方案1
5 已采纳 2015-10-22 13:07:57

解决方案2
0 2022-01-17 11:52:05