Ich generiere normale Links wie: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>in einer Web-App.

Wenn ich auf den Link klicke, wird das Bild auf einer neuen Seite angezeigt. Wenn Sie das Bild speichern möchten, müssen Sie mit der rechten Maustaste darauf klicken und "Speichern unter" auswählen.

Ich möchte dieses Verhalten nicht, ich möchte, dass eine Download-Box herausspringt, wenn ich auf den Link klicke. Ist das nur mit HTML oder Javascript möglich? Wie?

Wenn nicht, müsste ich wohl ein download.php-Skript schreiben und es in die href mit dem Dateinamen als Parameter aufrufen ...?

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

Es wird noch nicht vollständig unterstützt http://caniuse.com/#feat=download , aber Sie können es mit modernizr https://modernizr.com/download/?adownload-setclasses ( unter Nicht-Kern-Erkennungen ) verwenden, um die Unterstützung von zu überprüfen der Browser.

Der einfachste Weg, einen Download-Link für Bild oder HTML zu erstellen, ist das Festlegen des Download-Attributs . Diese Lösung funktioniert jedoch nur in modernen Browsern.

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

"myimage" ist ein Name der herunterzuladenden Datei. Erweiterung wird automatisch hinzugefügt Beispiel hier

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

}
?>

Nein, ist es nicht. Sie benötigen etwas auf dem Server, um einen Content-Disposition-Header zu senden und die Datei als Anhang festzulegen, anstatt inline zu sein. Sie können dies jedoch mit einer einfachen Apache-Konfiguration tun.

Ich habe ein Beispiel dafür gefunden, wie man es mit mod_rewrite macht , obwohl ich weiß, dass es einen einfacheren Weg gibt.

Wenn Sie HTML5 verwenden, können Sie Ihren Links das Attribut 'Download' hinzufügen.

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

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

Versuche dies...

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

HTML-Download-Attribut, um anzugeben, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt.

Dieses Attribut wird nur verwendet, wenn das href-Attribut festgelegt ist.

Der Wert des Attributs ist der Name der heruntergeladenen Datei. Es gibt keine Einschränkungen für zulässige Werte, und der Browser erkennt automatisch die richtige Dateierweiterung und fügt sie der Datei hinzu (.img, .pdf, .txt, .html usw.).

Beispielcode:

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

Ausgabe :

Bild herunterladen >>

HTML5 herunterladen oder Chrome

Bild herunterladen >>

Sie können es nicht mit reinem HTML / Javascript tun. Dies liegt daran, dass Sie eine separate Verbindung zum Webserver haben, um eine separate Datei (das Bild) abzurufen, und ein normaler Webserver die Datei mit festgelegten Inhaltsheadern bereitstellt, sodass der Browser, der den Inhaltstyp liest, entscheidet, dass der Typ intern verarbeitet werden kann.

Die Möglichkeit, den Browser zu zwingen, die Datei nicht intern zu verarbeiten, besteht darin, die Header (vorzugsweise Inhaltsdisposition oder Inhaltstyp) zu ändern, damit der Browser nicht versucht, die Datei intern zu behandeln. Sie können dies entweder tun, indem Sie ein Skript auf den Webserver schreiben, das die Header dynamisch setzt (z. B. download.php), oder indem Sie den Webserver so konfigurieren, dass verschiedene Header für die Datei zurückgegeben werden, die Sie herunterladen möchten. Sie können dies auf Verzeichnisbasis auf dem Webserver tun, sodass Sie ohne PHP oder Javascript davonkommen können - haben Sie einfach alle Ihre Download-Bilder an diesem einen Ort.

Einfacher Code zum Herunterladen von Bildern mit einem Bild, das mit PHP klickt

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

Bild herunterladen mit Bildklick!

Ich habe diesen einfachen Code gemacht! :)

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