Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.06.2020, 19:00
Новичок на форуме
Отправить личное сообщение для RZAh Посмотреть профиль Найти все сообщения от RZAh
 
Регистрация: 06.06.2020
Сообщений: 4

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

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

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

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

Пожалуйста, подскажите, какие функции заменить, чтобы можно было передавать ссылку на изображение, а не файл.
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2020, 21:47
Аватар для Error
Интересующийся
Отправить личное сообщение для Error Посмотреть профиль Найти все сообщения от Error
 
Регистрация: 30.04.2020
Сообщений: 17

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

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

Последний раз редактировалось Error, 06.06.2020 в 21:50. Причина: Дополнение
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2020, 14:56
Новичок на форуме
Отправить личное сообщение для RZAh Посмотреть профиль Найти все сообщения от RZAh
 
Регистрация: 06.06.2020
Сообщений: 4

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 должна быть другой.
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2020, 15:15
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Цитата:
crossOrigin - это для загрузки скриптов
Это утверждение лживое или ошибочное.

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

Отладчик браузера должен красными буквами писать что скрипт вызывает CORS исключение.
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2020, 15:53
Новичок на форуме
Отправить личное сообщение для RZAh Посмотреть профиль Найти все сообщения от RZAh
 
Регистрация: 06.06.2020
Сообщений: 4

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

Или я неправильно его использовал
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2020, 16:43
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

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

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

Суть в том что использование контента разрешает владелец этого контента.
иначе ты мог бы на своем сайте разрешить получение личных сообщений из контакта или почты которой пользуется человек открывший твой сайт либо же персональных данных интернет банкинга.
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2020, 19:36
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от RZAh
чтобы можно было передавать ссылку на изображение, а не файл.
Правильно так:
img1.src = '/get.php?url=' + encodeURIComponent(url);
Ответить с цитированием
  #8 (permalink)  
Старый 08.06.2020, 23:29
Новичок на форуме
Отправить личное сообщение для RZAh Посмотреть профиль Найти все сообщения от RZAh
 
Регистрация: 06.06.2020
Сообщений: 4

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

encodeURIComponent тоже не помогает.
Ответить с цитированием
  #9 (permalink)  
Старый 09.06.2020, 07:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

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

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

Последний раз редактировалось Rise, 09.06.2020 в 07:27.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка и получение данных AJAX Le7o AJAX и COMET 18 14.06.2016 21:55
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 13:00
Получение данных NeoMurderer AJAX и COMET 11 21.08.2011 14:46
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04
Водяной знак на fancybox bobrina Общие вопросы Javascript 1 03.06.2011 21:11