В веб-разработке часто возникает требование, согласно которому изображение должно загружаться, когда пользователь нажимает на него. Этого можно добиться различными методами, и в этой статье блога мы рассмотрим несколько подходов и приведем примеры кода.

Метод 1: использование атрибута JavaScript download
HTML:

<img src="image.jpg" onclick="downloadImage(this)" />
JavaScript:
function downloadImage(element) {
  const link = document.createElement("a");
  link.href = element.src;
  link.download = "image.jpg";
  link.click();
}

Метод 2: использование JavaScript fetchAPI и Blob
HTML:

<img src="image.jpg" onclick="downloadImage(this)" />
JavaScript:
function downloadImage(element) {
  fetch(element.src)
    .then((response) => response.blob())
    .then((blob) => {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "image.jpg";
      link.click();
      window.URL.revokeObjectURL(url);
    });
}

Метод 3: использование HTML5 Canvas и метода toDataURL
HTML:

<img src="image.jpg" onclick="downloadImage(this)" />
JavaScript:
function downloadImage(element) {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const image = new Image();
  image.src = element.src;
  image.onload = function () {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);
    const link = document.createElement("a");
    link.href = canvas.toDataURL("image/jpeg");
    link.download = "image.jpg";
    link.click();
  };
}

Метод 4. Использование атрибута HTML5 downloadи Canvas
HTML:

<a href="image.jpg" download="image.jpg">
  <img src="image.jpg" />
</a>

Метод 5: использование серверных языков программирования
Если вы работаете с серверным языком, например PHP, вы можете использовать функцию readfileдля загрузки изображения по щелчку мыши. Вот пример использования PHP:

<?php
$image = "image.jpg";
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"" . basename($image) . "\"");
readfile($image);
exit;
?>

В этой записи блога мы рассмотрели различные методы реализации загрузки одноэлементного изображения по клику. Эти методы включают использование атрибутов JavaScript, API fetch, атрибута HTML5 download, холста HTML5 и серверных языков программирования, таких как PHP. В зависимости от ваших конкретных требований и технологий, которые вы используете, вы можете выбрать метод, который лучше всего соответствует вашим потребностям.