HTML5 canvas getImageData（）无法工作

Question

HTML5 canvas getImageData（）无法工作

当我使用getImageData（）函数获取带有chrome图像的数据时，它表示未捕获的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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Jar*_*ith 6

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

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

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

归档时间：	10 年，2 月前
查看次数：	3797 次
最近记录：	10 年，2 月前