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

Это единственный способ получить imageData загруженного извне изображения? Рисование изображения на холсте, а затем получение изображений кажется ужасно медленным. Я что-то упустил?

Спасибо!

Answer 1

Нет прямого способа получить ImageData, он неэффективен, но, с другой стороны, вам, вероятно, не нужно многократно рисовать изображение на холсте - если вам нужны необработанные данные несколько раз, вы, вероятно, просто хотите нарисовать на холст за кадром один раз и держите этот холст вокруг.

Увы, другая проблема холста состоит в том, что по соображениям безопасности вы не можете читать ImageData с холста, если когда-либо рисовали изображение (или другой ресурс) из другого источника.

Answer 2

Вы можете попробовать выполнить двоичный Ajax, а затем декодировать данные изображения вручную, но с помощью canvas будет проще.