Question

当我使用getImageData（）函数获取带有chrome的图像数据时，它表示Uncaught IndexSizeError：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：源宽度为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之类的内容来确保读取数据的代码在代码之后运行写下来。

HTML5 canvas getImageData（）无法正常工作

1 个答案: