Generuję zwykłe linki, takie jak: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>w aplikacji internetowej.

Kiedy klikam link, wyświetla obraz na nowej stronie. Jeśli chcesz zapisać zdjęcie, kliknij je prawym przyciskiem myszy i wybierz „zapisz jako”

Nie chcę tego zachowania, chciałbym, aby po kliknięciu linku wyskakiwało okno pobierania, czy jest to możliwe tylko w przypadku html lub javascript? W jaki sposób?

Jeśli nie, to chyba musiałbym napisać skrypt download.php i wywołać go w href z nazwą pliku jako parametrem ...?

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

Nie jest jeszcze w pełni obsługiwana http://caniuse.com/#feat=download , ale możesz użyć z modernizr https://modernizr.com/download/?adownload-setclasses (w sekcji Wykrywania spoza rdzenia ), aby sprawdzić obsługę przeglądarka.

Najłatwiejszym sposobem utworzenia linku do pobrania obrazu lub html jest ustawienie atrybutu pobierania , ale to rozwiązanie działa tylko w nowoczesnych przeglądarkach.

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

„myimage” to nazwa pliku do pobrania. Rozszerzenie zostanie dodane automatycznie Przykład tutaj

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

}
?>

Nie, nie jest. Będziesz potrzebował czegoś na serwerze, aby wysłać nagłówek Content-Disposition, aby ustawić plik jako załącznik zamiast być wbudowanym. Możesz to jednak zrobić ze zwykłą konfiguracją Apache.

Znalazłem przykład robienia tego za pomocą mod_rewrite , chociaż wiem, że jest prostszy sposób.

Jeśli korzystasz z HTML5, możesz dodać atrybut „pobierz” do swoich linków.

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

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

Spróbuj tego...

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

Atrybut pobierania HTML, aby określić, że cel zostanie pobrany, gdy użytkownik kliknie hiperłącze.

Ten atrybut jest używany tylko wtedy, gdy ustawiono atrybut href.

Wartością atrybutu będzie nazwa pobranego pliku. Nie ma ograniczeń co do dozwolonych wartości, a przeglądarka automatycznie wykryje prawidłowe rozszerzenie pliku i doda je do pliku (.img, .pdf, .txt, .html itp.).

Przykładowy kod:

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

Wyjście :

Pobierz obraz >>

Pobieranie HTML5 lub Chrome

Pobierz obraz >>

Nie możesz tego zrobić za pomocą czystego html / javascript. Dzieje się tak, ponieważ masz oddzielne połączenie z serwerem WWW w celu pobrania oddzielnego pliku (obrazu), a normalny serwer WWW będzie obsługiwał plik z ustawionymi nagłówkami treści, tak aby przeglądarka odczytująca typ zawartości zdecydowała, że ​​typ ten może być obsługiwany wewnętrznie.

Sposobem na wymuszenie, aby przeglądarka nie obsługiwała pliku wewnętrznie, jest zmiana nagłówków (preferowana dystrybucja treści lub typ zawartości), aby przeglądarka nie próbowała obsługiwać pliku wewnętrznie. Możesz to zrobić, pisząc na serwerze WWW skrypt, który dynamicznie ustawia nagłówki (np. Download.php) lub konfigurując serwer WWW, aby zwracał różne nagłówki dla pliku, który chcesz pobrać. Możesz to zrobić dla każdego katalogu na serwerze internetowym, co pozwoliłoby ci uciec bez pisania jakiegokolwiek php lub javascript - po prostu umieść wszystkie obrazy do pobrania w tej jednej lokalizacji.

Prosty kod do pobrania obrazu z kliknięciem obrazu za pomocą 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>

Pobieranie obrazu za pomocą klikania obrazów!

Zrobiłem ten prosty kod! :)

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