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

[RZAh]

Привет.

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

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

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

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

[Error]

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

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

[RZAh]

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

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

img1 = new Image(); 
img1.src = "https://cdn.freshdesignweb.com/wp-content/uploads/site/flow.js-angular-html5-file-upload.jpg";

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

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

[MallSerg]

crossOrigin - это для загрузки скриптов

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

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

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

[RZAh]

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

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

[MallSerg]

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

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

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

[RZAh]

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

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