Скачивание изображений при клике: решение на JavaScript

Быстрый ответ

Вы хотите сделать так, чтобы при клике на изображение оно скачивалось? В этом случае вам пригодится атрибут download. Привяжите его к ссылке, внутри которой размещено изображение. В атрибуте href обязательно должен быть указан URL вашего изображения, а download будет задавать предложенное имя файла. Например, так:

<a href="image.jpg" download="cool_pic.jpg">
  <img src="image.jpg" alt="Захватывающее изображение">
</a>

Теперь при клике на изображение начнётся загрузка файла с заданным именем.

Работа с совместимостью и ограничениями

Следует учесть, что атрибут download поддерживается не всеми браузерами. Некоторые из них могут проигнорировать его. Чтобы запрограммировать обратную связь для пользователя или предложить альтернативные подсказки, можно использовать проверку поддержки данной функции браузером:

if ('download' in document.createElement('a')) {
  // Если вы видите это сообщение, значит браузер поддерживает скачивание.
} else {
  // К сожалению, браузер не поддерживает скачивание файлов.
}

Преодоление CORS и проблемы с кросс-доменными изображениями

Если вы столкнулись с проблемой кросс-доменных изображений или политикой CORS, не отчаивайтесь. Используйте атрибут crossOrigin со значением anonymous на объекте Image, отрисуйте его на canvas, и затем инициируйте загрузку:

let img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  let dataURL = canvas.toDataURL('image/png');
  
  let link = document.createElement('a');
  link.href = dataURL;
  link.download = 'image.png';
  link.click();
  // И вот у вас на компьютере сохраняется картинка под названием image.png!
};
img.src = "cross-origin-image.jpg";

Программное запуск скачивания с помощью JavaScript

Хотите иногда запускать загрузку динамически, используя JavaScript? Вы удачливы: просто создайте ссылочный элемент с таким кодом:

let link = document.createElement('a');
link.href = 'url/to/image.jpg';  // Вставьте нужный URL!
link.download = 'download_me.jpg';  // И выберите имя файла для загрузки!
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Вот и всё, загрузка начата!

Получение удаленных изображений и Fetch API

Если вы используете Fetch API для загрузки изображений, не забудьте обработать ответ в виде blob и воспользоваться URL.createObjectURL():

fetch('url/to/image.jpg') // Важно проверить верность URL. 😜
  .then(response => response.blob())
  .then(blob => {
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.href = url;
    a.download = 'filename.jpg';
    document.body.appendChild(a);
    a.click();
    a.remove();
    // Отлично, blob-изображение успешно загружено!
  })
  .catch(e => console.error(e));

Немного дополнений

Атрибут download незаменим при извлечении имени файла из URL и определении типа MIME изображения. Данный атрибут поможет обеспечить точность формата файла, в связи с чем никто не будет загрузить .jpg как .xlsx, верно?

Визуализация

Возьмем за основу простую фотогалерею:

Галерея 🌄: [🏞, 🌆, 🌇, 🏔]

По умолчанию при клике на изображение оно открывается в браузере. Но мы с вами это изменим!

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

Всё в силе атрибута 'download':

<a href="mountain.jpg" download>🏞️</a>  // Кликните чтобы скачать картинку горы!

И вуаля!

Галерея 🌄: [⬇️🏞, ⬇️🌆, ⬇️🌇, ⬇️🏔]

Теперь каждое изображение доступно для скачивания! Браузер, словно надёжный хранитель данных, будет обрабатывать каждый запрос как приоритетное задание.

Обработка динамических изменений и обеспечение согласованности

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

function pewpewDownload(imageUrl, filename) {
  let tmpLink = document.createElement('a');
  tmpLink.href = imageUrl;
  tmpLink.setAttribute('download', filename);
  tmpLink.style.display = 'none';
  document.body.appendChild(tmpLink);
  tmpLink.click();
  document.body.removeChild(tmpLink);
  // Создание временных элементов — проверенное временем решение!
}

Соответствие меняющимся стандартам браузеров

Слажённое функционирование в разных браузерах иногда становится подобным подвигам Геракла, особенно в свете изменений политик Chrome и других обновлений браузеров. Следите за такими обновлениями, чтобы функция скачивания всегда работала без сбоев!

Полезные материалы

1. Как создать ссылку для скачивания
2. Элемент Anchor — HTML: Язык гипертекстовой разметки
3. Скачивание файла с помощью JavaScript/jQuery
4. HTML a download Attribute
5. Стандарт HTML