web-dev-qa-db-ja.com

href画像リンククリックでダウンロード

私はウェブアプリで<a href="/path/to/image"><img src="/path/to/image" /></a>のような普通のリンクを生成します。

リンクをクリックすると、新しいページに画像が表示されます。写真を保存したい場合は、それを右クリックして「名前を付けて保存」を選択する必要があります。

このような動作はしたくありません。リンクをクリックしたときにダウンロードボックスが飛び出してしまいたいのですが、それはhtmlまたはjavascriptで可能ですか？どうやって？

そうでない場合は、download.phpスクリプトを作成し、ファイル名をパラメータとしてhrefに呼び出す必要があります。

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

まだ完全にはサポートされていませんhttp://caniuse.com/#feat=download、しかしmodernizrhttps://modernizr.com/download/?adownload-setclasses（ノンコアの場合はブラウザのサポートを確認するために）を検出します。

218
Francisco Costa

Imageまたはhtmlのダウンロードリンクを作成する最も簡単な方法は、 download attribute を設定することですが、この解決策は最新のブラウザでしか機能しません。

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

"myimage"はダウンロードするファイルの名前です。拡張子は自動的に追加されます ここの例

54
Aleksey Saatchi
<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');

}
?>
46
amir

いいえ、違います。ファイルをインラインではなく添付ファイルとして設定するには、Content-Dispositionヘッダーを送信するためにサーバー上で何かが必要になります。ただし、これは単純なApache設定でも可能です。

もっと簡単な方法があることはわかっていますが、 mod_rewriteを使用した例 を見つけました。

10
Quentin

HTML 5を使用している場合は、リンクに属性「ダウンロード」を追加できます。

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

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

7
Jijo Paulose

これを試して...

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

純粋なhtml/javascriptではできません。これは、別のファイル（画像）を取得するためにWebサーバーに別々に接続し、通常のWebサーバーがコンテンツヘッダーを設定してファイルを処理するため、コンテンツタイプを読み取るブラウザがそのタイプを内部で処理できると判断するためです。

ブラウザがファイルを内部的に処理しないように強制する方法は、ブラウザがファイルを内部的に処理しないようにヘッダーを変更することです（content-disposition、優先的に、またはcontent-type）。動的にヘッダを設定するスクリプト（すなわちdownload.php）をウェブサーバに書くか、ダウンロードしたいファイルに対して異なるヘッダを返すようにウェブサーバを設定することによってこれを行うことができます。 Webサーバー上でディレクトリごとにこれを行うことができます。これにより、phpやjavascriptを作成せずにすべてのダウンロードイメージをその場所に保存することができます。

3
Colin Pickard

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>
3
Sashtha Manik

画像クリックで画像ダウンロード！

私はこの簡単なコードをやりました！:)

<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>
1
Sashtha Manik

ユーザーがハイパーリンクをクリックしたときにターゲットがダウンロードされることを指定するための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>

出力：

画像をダウンロード>>

HTML 5ダウンロードまたはクロム

画像をダウンロード>>

1
Rizo