外部加载的图像的ImageData？

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);

这是获取外部加载图像的图像数据的唯一方法吗？ 在画布上绘制图片，然后获取图像数据似乎非常慢。 我有什么遗漏吗？

谢谢！

- sc45

---

为什么他们没有将这个作为Image对象中的某个字段呢？ - Yngve Sneen Lindal

Answer 1

获取ImageData没有直接的方法，这是低效的，但另一方面，如果您需要多次使用原始数据，则可能不需要重复将图像绘制到画布上 - 如果您需要多次使用原始数据，则可能只需一次绘制到离屏画布并保留该画布。

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

- olliej

Answer 2

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

- Jeffery To