Я генерую звичайні посилання типу: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>у веб-програмі.

Коли я натискаю на посилання, воно відображає картинку на новій сторінці. Якщо ви хочете зберегти малюнок, то вам потрібно клацнути правою кнопкою миші на ньому та вибрати "зберегти як"

Я не бажаю такої поведінки, я хотів би, щоб при натисканні на посилання з’явилося вікно завантаження, чи можливо це лише за допомогою HTML або javascript? Як?

Якщо ні, я думаю, мені доведеться написати скрипт download.php і викликати його в href з назвою файла як параметр ...?

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Це ще не повністю підтримується http://caniuse.com/#feat=download , але ви можете використовувати за допомогою модернізації https://modernizr.com/download/?adownload-setclasses (у розділі Непрофільні виявлення ), щоб перевірити підтримку браузер.

Найпростішим способом створення посилання для завантаження зображення або html є встановлення атрибута завантаження , але це рішення працює лише в сучасних браузерах.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" - це ім'я файлу для завантаження. Розширення буде додано автоматично Приклад тут

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>

Ні, це не так. Вам буде потрібно щось на сервері, щоб надіслати заголовок Content-Disposition, щоб встановити файл як вкладення, а не вбудований. Ви можете зробити це за допомогою звичайної конфігурації Apache.

Я знайшов приклад робити це за допомогою mod_rewrite , хоча я знаю, що існує більш простий спосіб.

Якщо ви використовуєте HTML5, ви можете додати атрибут "завантажити" до своїх посилань.

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

Спробуйте це...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

Атрибут завантаження HTML, щоб вказати, що ціль буде завантажена, коли користувач натисне на гіперпосилання.

Цей атрибут використовується лише якщо встановлено атрибут href.

Значенням атрибута буде ім'я завантаженого файлу. Немає обмежень щодо дозволених значень, і браузер автоматично виявить правильне розширення файлу та додасть його до файлу (.img, .pdf, .txt, .html тощо).

Приклад коду:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

Вихід :

Завантажити зображення >>

Завантажити Html5 або chrome

Завантажити зображення >>

Ви не можете це зробити з чистим html / javascript. Це тому, що у вас є окреме з'єднання з веб-сервером для отримання окремого файлу (зображення), а звичайний веб-сервер обслуговуватиме файл із встановленими заголовками вмісту, щоб браузер, який читає тип вмісту, вирішив, що типом можна керувати внутрішньо.

Спосіб змусити браузер не обробляти файл внутрішньо - змінити заголовки (бажано розміщення вмісту або тип вмісту), щоб браузер не намагався обробляти файл внутрішньо. Ви можете це зробити, написавши на веб-сервері сценарій, який динамічно встановлює заголовки (тобто download.php), або налаштувавши веб-сервер для повернення різних заголовків для файлу, який ви хочете завантажити. Це можна зробити на веб-сервері за каталогами, що дозволить вам піти, не записуючи жодного php чи javascript - просто розмістіть усі завантажені зображення в одному місці.

Простий код для завантаження зображень із натисканням зображення за допомогою php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>

Завантажте зображення за допомогою клацання зображення!

Я зробив цей простий код! :)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>