ฉันสร้างลิงค์ปกติเช่น: <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');

}
?>

ไม่มันไม่ใช่ คุณจะต้องมีบางอย่างบนเซิร์ฟเวอร์เพื่อส่งส่วนหัวของเนื้อหาการจัดการเพื่อตั้งไฟล์เป็นสิ่งที่แนบมาแทนที่จะเป็นแบบอินไลน์ คุณสามารถทำได้ด้วยการกำหนดค่า 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 หรือ Chrome

ดาวน์โหลดรูปภาพ >>

คุณไม่สามารถทำได้ด้วย 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>