Получить уникальный идентификатор в Javascript изображения, уже загруженного браузером

Question

У меня есть несколько страниц, которые отображают информацию о книгах, и они используют внешний сервер обложек для получения обложек, помещая соответствующий URL в атрибут src элемента img.

Сервер обложек не имеет всех обложек, поэтому очень часто он возвращает пустую обложку по умолчанию.

Мне нужен способ узнать, на стороне javascript и после загрузки страницы, если обложка, возвращаемая сервером обложек, является пустым изображением по умолчанию, чтобы заменить это пустое изображение по умолчанию пользовательским HTML-кодом. Поэтому я попытался вычислить уникальный идентификатор для изображения обложки.

Я думал сделать это, используя метод canvas 'drawImage, а затем получить хеш canvas.toDataUrl, но последний возвращает мне исключение безопасности, поскольку изображение поступает с внешнего сервера.

У вас есть какая-нибудь лучшая (и работающая) идея для достижения моей цели?

Answer 1

Не может быть сделано на стороне клиента. Было бы дырой в безопасности (межсайтовый скриптинг), если бы скрипт из одного домена мог просматривать содержимое изображения, полученного из другого домена.

Вам потребуется найти информацию либо с помощью отдельного сервиса на стороннем сервере, либо загрузив изображение на стороне сервера и сравнив его с изображением-заполнителем. (Предложите использовать запрос HEAD, чтобы сначала проверить длину и посмотреть, соответствует ли она известной длине изображения-заполнителя для скорости.)

Answer 2

Отличаются ли ширина и высота пустого изображения от обычных изображений? Если так, используйте это как руководство.

Answer 3

Может быть, вы можете сделать XmlHttpRequest для изображения обложки, например, запрос HEAD, а затем посмотреть значение заголовка ETag (или Content-MD5 или что-то в этом роде).