Извлечение двоичного или base64 из <img>

Question

Есть ли способ получить доступ к полному двоичному представлению (или его кодировке base64) при отображении img в jQuery/javascript? Такие, как

<img id="myImage" src="http://someURL/someImage.png" /> 

Javascript

$('#myImage).getBuffer() 

Причина: Я хочу, чтобы поместить изображение из другого источника в холст и изменить его. Ввод источника непосредственно на холст (см. this), я ничего не получаю (нарушение Same-Origin-Policy?). Запросы AJAX имеют одинаковую проблему.

Я могу (и уже сделал) изменить сервер, чтобы разрешить новое внешнее происхождение (CORS). Это работает, но такое происхождение является динамическим локальным IP, и было бы гораздо лучше иметь что-то чисто клиентское.

Answer 1

Существует не один. Вы не можете делать что-либо на стороне клиента, чтобы переопределить политику одного и того же происхождения (если только вы не взломали браузер или не сделали свой собственный, чтобы запретить браузеру устанавливать tainted flag (или, скорее, флаг origin-clean) на холсте :-)).

До тех пор, пока источник исходного изображения! == происхождение страницы, стандарт требует, чтобы браузер устанавливал холст, если только исходный сервер не принимает использование из другого источника. На стороне клиента нет решений, чтобы обойти это (по соображениям безопасности).

Изображение аргумент не происхождение-чистым, если он является HTMLImageElement или HTMLVideoElement, происхождение которого не совпадает с происхождения вступления сценария, или, если это HTMLCanvasElement происхождение которого очищаемые флаг растрового изображения является ложным , или если это объект CanvasRenderingContext2D, флагнуля-растрового изображения растрового изображения является ложным.

Источник: WhatWG 4.8.11.2.9 (last paragraph)

И если это так (4.8.11.2.16):

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

параметры, которые вы получили это:

1. Изменить исходный сервер для обеспечения Access-Control-Allow-Origin заголовка (минимум) (как вы уже сделали), а затем использовать атрибут crossOrigin в теге изображения (<img src="other-site" crossOrigin />, состояние по умолчанию anonymous - Это только запрос и на сервер для принять это.
2. Используйте свой собственный сервер в качестве прокси-сервера, чтобы получить изображение с исходного сервера и предоставить его клиенту в том же самом источнике (например, http://mysite/getImage.cgi|.aspx|.php|..?src=other-site/img).
3. Изменить браузер ... и т. Д.:-P

Вы можете низкоуровневые разобрать изображение самостоятельно, но вам нужно будет «загрузить» изображение клиента в любом случае через File API и разобрать его оттуда, который был бы более неудобным ИМХО (переход через ваш собственный сервер, действующий как прокси, немного проще).

Answer 2

Вы можете проверить здесь, чтобы получить двоичные данные изображения https://gist.github.com/leotsem/960542