JavaScript: получение ImageData без холста

Ответ 1

Вам нужно создать холст в памяти, а затем нарисовать на этом холсте изображение:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

Но это не сработает, если изображение поступит из другого домена. Это ограничение безопасности, с которым вы не можете обойтись, если у вас нет контроля над сервером (будьте осторожны, если вы откроете свой html файл с файлом://у вас будет много дополнительных ограничений, используйте http://)

Ответ 2

Как уже подразумевалось, canvas предлагает единственное решение для создания объектов ImageData.

Если вы действительно настроены против использования элемента canvas для загрузки данных изображения (возможно, мы говорим lte IE8), вы всегда можете рассмотреть синтаксический анализ данных изображения base64, используя расположение src объекта изображения

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

Это сложно, но если нужно, возможно потенциально разобрать изображения на массив таким образом.

https://github.com/devongovett/png.js/blob/master/png.js

Это показывает вам, как загружать данные с помощью запроса xhr и анализировать данные png. Внутренне он использует холст для некоторых других вещей, но подмножество, которое вас интересует, является свободным от холста. Вам нужно будет выполнить аналогичную реализацию для каждого интересующего вас формата изображения.

Я должен упомянуть, что ограничения чтения пикселов изображения идентичны с точки зрения безопасности. Вы никогда не сможете читать пиксели, которые пришли от третьей стороны, с холстом или без него. XMLHTTPRequest будет связан с управлением междоменными политиками. Это не позволяет скриптам красть контент сторонних производителей, включая изображения, которые могут содержать конфиденциальную информацию пользователя.

Если вам необходимо прочитать изображения на стороннем домене (которые не требуют проверки подлинности для просмотра), вы должны запустить прокси-сервер изображения в своем домене, который позволяет запрашивать изображения в одном домене. Если вам нужно идти навстречу этому, может быть проще просто предоставить данные изображения в виде json-массива в первую очередь.