Клиентский скрипт для чтения и манипулирования изображением из Интернета (подробнее ...)

Question

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

Изначально я использовал сценарий флеш-памяти ... Greasemonkey встроил локальный файл флеш-памяти, который извлекал изображение на основе URL-адреса в исходной странице веб-страницы, использовал ActionScript для получения самого темного пикселя, а затем отправлял запрос POST с эти координаты как значения.

Проблема в том, что я хочу загрузить изображение только один раз. При использовании этого метода он делает это дважды (один раз в браузере, один раз во флэш-памяти). Есть ли способ манипулировать изображением с веб-страницы в Javascript или с помощью другого клиентского языка? Я пытался использовать Canvas, но вы не можете выполнить функцию getImageData () для изображений, размещенных на удаленных серверах.

Answer 1

Вы можете загрузить его только во флэш-памяти и делать со своим изображением все, что захотите, а затем, если вам нужно показать его на странице, вы можете закодировать изображение в виде строки base64 PNG (вам понадобятся библиотеки AS для PNG и кодировка base64).

Следующим шагом будет передача строки в javascript, и в Javascript вы сможете воспользоваться возможностью встраивания изображений base64 (поддерживается в Firefox, Opera, а не IE).

Синтаксис:

<img src='data:image/png;base64,ABCDE...'>

где "ABCDE ..." - строка base64, сгенерированная во флэш-памяти.

Таким образом, вы получите изображение только один раз, но все равно сможете показать его как обычное HTML-изображение.

Я использовал эту технику в своем любимом проекте ( www.creationempire.com / tstyles ), чтобы сгенерировать изображения в онлайн-генераторе изображений, и получил первоначальную идею от http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage

Хьюго