Как сохранить img.src при помощи js?

Question

[alestro]

Есть необходимость имитировать поведение браузера при сохранении изображений (правый клик -> сохранить картинку как).
На странице выводится галерея с изображениями с удаленного хоста.
Необходимо сохранять изображение по клику на кнопку, но все img.src ссылаются на удаленный хост, доступа к которому не имею.
Пытаюсь реализовать следующим образом

const link = document.createElement('a');
            link.href = "#"
            link.download = currentImg.src
            link.click();

Но такой вариант заканчивается ошибкой об отсутствующих файлах.
Пробовал скачивать файл axiosom, но запрос крашится с ошибкой cors.
Можно ли как-либо эмулировать поведение браузера по типу правый клик -> сохранить картинку как ?

Answer 1

[Anonymous Penguin]

https://developer.mozilla.org/ru/docs/Web/API/Blob
https://learn.javascript.ru/blob

// берём любое изображение
let img = document.querySelector('img');

// создаём <canvas> того же размера
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// копируем изображение в  canvas (метод позволяет вырезать часть изображения)
context.drawImage(img, 0, 0);
// мы можем вращать изображение при помощи context.rotate() и делать множество других преобразований

// toBlob является асинхронной операцией, для которой callback-функция вызывается при завершении
canvas.toBlob(function(blob) {
  // после того, как Blob создан, загружаем его
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // удаляем внутреннюю ссылку на Blob, что позволит браузеру очистить память
  URL.revokeObjectURL(link.href);
}, 'image/png');

Comments

[GrayHorse]

Это не поможет от CORS (с чем столкнулся автор при нормальном способе сохранения картинки: fetch -> blob -> blobURL -> a.download-> click()).

К тому же из-за лишней операции конвертирования (в канвас и обратно) ухудшится качество картинки. (Если бы не было ограничения CORS.)

[Alexandroppolus]

берём любое изображение

да нет, не любое. Изображения с другого сервера нарисуются на канве, но toBlob после этого уже не сработает. Там тот же принцип - если нельзя скачать аяксом, то и нельзя забрать с канвы.

[Anonymous Penguin]

GrayHorse, я тоже кучу раз и времени парился с этим тупым CORS, у меня было приложение по шифрованию картинок по URL. В общем, спустя 100500 часов я не нашел ничего другого, кроме как загрузить и вернуть картинку через PHP-скрипт, ему вообще пофиг на заголовки, кроме пары небольших исключений