Я генерирую нормальные ссылки, такие как: <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 , но вы можете использовать с modernizr 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 скачать или хром

Загрузить изображение >>

Вы не можете сделать это с чистым 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>