Question

我加载一个外部图像并在Canvas元素上绘制它，如下所示：

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(evt) { context.drawImage(evt.target, 0, 0); }
image.src = "test.jpg";

但我想获得ImageData。所以在调用 context.drawImage 后，我这样做：

var imagedata = canvas.getImageData();
manipulate(imagedata); // modifies imagedata.data
context.putImageData(imagedata, 0, 0);

这是获取外部加载图像的imageData的唯一方法吗？在画布上绘制图像＆amp;然后获得imagedata看起来非常缓慢。我错过了什么吗？

谢谢！

Answer 1

没有直接获取ImageData的方法，它效率低下但另一方面你可能不需要重复将图像绘制到画布上 - 如果你需要多次原始数据，你可能只是想绘制到屏幕外的画布一次并保持画布。

对于canvas的另一个问题是，出于安全原因，如果您从不同的原点绘制了图像（或其他资源），则无法从画布中读取ImageData。

Answer 2

您可以尝试执行二进制Ajax，然后手动解码图像数据，但使用canvas会更容易。

外部加载图像的ImageData？

2 个答案: