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

Question

Возможно ли получить объект ImageData с изображения, которое не находится на холсте, а где-то еще в дереве DOM, как в обычном <img>?

Если да, то как?

Answer 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: //)

Answer 2

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

Если вы действительно настроены против использования элемента холста для загрузки данных изображения (возможно, мы говорим Ге 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-массива в первую очередь.