Genero enlaces normales como: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>en una aplicación web.

Cuando hago clic en el enlace, muestra la imagen en una página nueva. Si desea guardar la imagen, debe hacer clic derecho sobre ella y seleccionar "guardar como"

No quiero este comportamiento, me gustaría que aparezca un cuadro de descarga cuando haga clic en el enlace, ¿es posible solo con html o javascript? ¿Cómo?

Si no, supongo que tendría que escribir un script download.php y llamarlo al href con el nombre del archivo como parámetro ...?

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

Todavía no es totalmente compatible con http://caniuse.com/#feat=download , pero puede usarlo con modernizr https://modernizr.com/download/?adownload-setclasses ( en Detecciones no centrales ) para verificar el soporte de el navegador.

La forma más fácil de crear un enlace de descarga para una imagen o html es establecer el atributo de descarga , pero esta solución solo funciona en navegadores modernos.

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

"myimage" es un nombre de archivo para descargar. La extensión se agregará automáticamente Ejemplo aquí

<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');

}
?>

No lo es. Necesitará algo en el servidor para enviar un encabezado Content-Disposition para configurar el archivo como un archivo adjunto en lugar de estar en línea. Sin embargo, podría hacer esto con una configuración simple de Apache.

He encontrado un ejemplo de cómo hacerlo usando mod_rewrite , aunque sé que hay una manera más simple.

Si está utilizando HTML5, puede agregar el atributo 'descargar' a sus enlaces.

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

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

Prueba esto...

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

Atributo de descarga HTML para especificar que el destino se descargará cuando un usuario haga clic en el hipervínculo.

Este atributo solo se usa si el atributo href está configurado.

El valor del atributo será el nombre del archivo descargado. No hay restricciones en los valores permitidos, y el navegador detectará automáticamente la extensión de archivo correcta y la agregará al archivo (.img, .pdf, .txt, .html, etc.).

Código de ejemplo:

<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>

Salida :

Descargar imagen >>

Descarga HTML o Chrome

Descargar imagen >>

No puede hacerlo con html / javascript puro. Esto se debe a que tiene una conexión separada con el servidor web para recuperar un archivo separado (la imagen) y un servidor web normal servirá el archivo con encabezados de contenido configurados para que el navegador que lee el tipo de contenido decida que el tipo puede manejarse internamente.

La forma de forzar al navegador a que no maneje el archivo internamente es cambiar los encabezados (disposición de contenido preferiblemente o tipo de contenido) para que el navegador no intente manejar el archivo internamente. Puede hacerlo escribiendo un script en el servidor web que establezca dinámicamente los encabezados (es decir, download.php) o configurando el servidor web para que devuelva diferentes encabezados para el archivo que desea descargar. Puede hacer esto por directorio en el servidor web, lo que le permitiría escapar sin escribir ningún php o javascript, simplemente tenga todas sus imágenes de descarga en esa ubicación.

Código simple para descargar imágenes con una imagen haciendo clic usando 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>

Descarga de imágenes con el uso de hacer clic en la imagen!

¡Hice este código simple! :)

<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>