Genero collegamenti normali come: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>in un'app Web.

Quando faccio clic sul collegamento, viene visualizzata l'immagine in una nuova pagina. Se si desidera salvare l'immagine, è necessario fare clic destro su di essa e selezionare "Salva con nome"

Non voglio questo comportamento, vorrei che una finestra di download venisse fuori facendo clic sul collegamento, è possibile solo con HTML o JavaScript? Come?

Altrimenti credo che dovrei scrivere uno script download.php e chiamarlo nell'href con il nome del file come parametro ...?

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

Http://caniuse.com/#feat=download non è ancora completamente supportato , ma è possibile utilizzare con modernizr https://modernizr.com/download/?adownload-setclasses ( in Rilevamenti non core ) per verificare il supporto di il browser.

Il modo più semplice per creare un collegamento per il download di immagini o HTML è impostare l' attributo di download , ma questa soluzione funziona solo nei browser moderni.

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

"myimage" è un nome di file da scaricare. L'estensione verrà aggiunta automaticamente Esempio qui

<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, non lo è. Sarà necessario qualcosa sul server per inviare un'intestazione Content-Disposition per impostare il file come allegato anziché essere in linea. Puoi farlo con la semplice configurazione di Apache.

ho trovato un esempio di come farlo usando mod_rewrite , anche se so che esiste un modo più semplice.

Se stai usando HTML5 puoi aggiungere l'attributo 'download' ai tuoi link.

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

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

Prova questo...

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

Attributo di download HTML per specificare che la destinazione verrà scaricata quando un utente fa clic sul collegamento ipertestuale.

Questo attributo viene utilizzato solo se è impostato l'attributo href.

Il valore dell'attributo sarà il nome del file scaricato. Non ci sono restrizioni sui valori consentiti e il browser rileverà automaticamente l'estensione del file corretta e la aggiungerà al file (.img, .pdf, .txt, .html, ecc.).

Codice di esempio:

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

Uscita :

Scarica immagine >>

Download HTML5 o Chrome

Scarica immagine >>

Non puoi farlo con puro HTML / JavaScript. Questo perché hai una connessione separata al server web per recuperare un file separato (l'immagine) e un server web normale servirà il file con le intestazioni del contenuto impostate in modo che il browser che legge il tipo di contenuto decida che il tipo può essere gestito internamente.

Il modo per forzare il browser a non gestire il file internamente è quello di modificare le intestazioni (preferibilmente la disposizione del contenuto o il tipo di contenuto) in modo che il browser non proverà a gestire il file internamente. Puoi farlo scrivendo uno script sul server web che imposta dinamicamente le intestazioni (ad esempio download.php) o configurando il server web per restituire diverse intestazioni per il file che vuoi scaricare. Puoi farlo su una base per directory sul server web, che ti permetterebbe di scappare senza scrivere php o javascript - semplicemente avere tutte le tue immagini di download in quella posizione.

Codice semplice per il download di immagini con un'immagine che fa clic con 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>

Download dell'immagine con l'utilizzo del clic dell'immagine!

Ho fatto questo semplice codice! :)

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