Получение данных изображения по URL
 

Привет.

Передо мной поставлена задача - написать на JS инструмент для сравнения похожести изображений. Ранее писал такой на PHP (его я знаю лучше, чем JS). Нашел хороший код, который идеально описывает мою задачу - view-source:http://blog.kislenko.net/archives/9171.html

Но нужно его переделать, чтобы изображение загружалось по ссылке.

Банально указать ссылку в .src в объекте Image() не рашает проблему. Возможно, когда файл по ссылке грузится, нужно обрабатывать его по-другому.

Пожалуйста, подскажите, какие функции заменить, чтобы можно было передавать ссылку на изображение, а не файл.

Не до конца понимаю вопрос. Главное — загрузить изображение и отобразить его на холсте. Тогда функция compareImages сможет сравнить два массива. Способ загрузки файла не влияет на то, как его следует обрабатывать.

Чтобы загружать по ссылке, используйте crossOrigin='Anonymous'.

crossOrigin - это для загрузки скриптов. Я же говорю про загрузку изображений по ссылке.

Когда я заменяю у Image() аттрибут src на ссылку на изображение, например:

При этом на Canvas появляются изображения по ссылке, но они не обрабатываются функцией "compareImages". Функция ничего не выдает.

Поэтому у меня вопрос: отличается ли обработка изображения, полученного по ссылке, а не файла. Предполагаю, что getImageData должна быть другой.

Это утверждение лживое или ошибочное.

Это политика и применяют ее к HTTP запросам не имеет значение что эти запросы запрашивают (текст, картинки, скрипты или стили).

Отладчик браузера должен красными буквами писать что скрипт вызывает CORS исключение.

Crossorigin ничего не изменил - https://rzahprojects.000webhostapp.com/temp/image.html.

Или я неправильно его использовал

Разрешение на использование изображения выдает хост который отвечает на запрос указав специальный заголовок. подробнее

В твоем примере хост "https://cdn.000webhost.com" должен установить
http заголовок "Access-Control-Allow-Origin: *" он этого не делает.
Ошибку в консоли ты не видишь потому что у промиса отправляющего запрос есть обработчик исключений.

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

Правильно так:

img1.src = '/get.php?url=' + encodeURIComponent(url);

Если дело в хосте, почему не работает при запуске не с сервера (с компа)? Также почему-то скрипт видит размеры одного избражения (который запустится первым), а второго нет (undefined), почему так?

encodeURIComponent тоже не помогает.

Потому что на file:// нет хоста, location.host равно "". Чтобы работало нужен сервер, локальный или глобальный.
Потому что, getImageData дает ошибку на кросс-доменные картинки, не соответствующие определенным правилам.
А чем оно помогает, если это для PHP, чтобы правильно попасть в $_GET['url']. Вам нужен прокси-сервер для картинок, либо свой get.php, либо чужой. Если чужой, то он должен иметь специальный заголовок ответа Access-Control-Allow-Origin, а картинки должны иметь специальный атрибут crossorigin: img1.crossOrigin='anonymous', img2.crossOrigin='anonymous'.

PS: get.php вам нужно реализовать самому, а не просто указать в ссылке.