gpt4 book ai didi

javascript - HTML5 canvas getImageData() 执行失败

转载 作者:行者123 更新时间:2023-12-02 18:51:07 37 4
gpt4 key购买 nike

当我使用 getImageData() 函数用 chrome 获取图像的数据时,它说 Uncaught IndexSizeError: Failed toexecute '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>

怎么会发生这种事?又该如何解决呢?

最佳答案

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

这就是混契约(Contract)步和异步代码时出现的问题,并且有许多技术可以解决这个问题。但我敢打赌,如果您在调试器中绘制图像的行和尝试读取图像的行设置一个断点,后者将在前者之前触发。

您需要将处理放入 onload 处理程序中(不推荐,因为耦合)或使用类似 promise 的东西确保读取数据的代码在写入数据的代码之后运行。

关于javascript - HTML5 canvas getImageData() 执行失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33281537/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com