web-dev-qa-db-ja.com

モバイルページのHTMLで画像ダウンロードリンクを作成するにはどうすればよいですか？

画像を含むモバイルhtmlページがあります。画像のダウンロードに使用するボタンやリンクを作成したい。次に、画像をユーザーのモバイル画像ギャラリーに保存する必要があります。

私はこの投稿を見ました： htmlでダウンロードリンクを作成するにはどうすればよいですか？

ソリューション

<a href="link/to/your/download/file" download="filename">Download link</a>

デスクトップブラウザで動作していますが、モバイルでは動作しません。

ここに私が作ったJSFiddleがあります： http://jsfiddle.net/tDVqH/4/

注：画像はブラウザ内、つまりHTML5のcanvas要素内に作成されます。この画像はcanvas.toDataUrl（）で生成できます。結果の画像はモバイル画像ギャラリーに保存する必要があります。

クリック/タップで画像をユーザーのモバイル画像ギャラリーに保存するにはどうすればよいですか？不明なヘッダーのあるサーバーラウンドトリップのないJavaScriptソリューションはありますか？

編集：次の質問も見つかりましたが、回答がありません。 モバイルブラウザーでリンクまたはボタンをクリックしてWebサイトからローカルフォルダーに画像を保存する および ブラウザーから携帯電話のギャラリーに画像を保存する

javascripthtmlgoogle-chromemobilemobile-safari
14
confile

誰かが持っているようです すでにこれに答えました 、

<a href="/path/to/image" download="ImageName" title="ImageName">
    <img src="/path/to/image" alt="ImageName">
</a> It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr

http://modernizr.com/download/#-a_download （非コア検出の下）すべてのブラウザーをサポートします。

テストしていませんが、携帯電話でも動作するはずです。

サーバー側のソリューションとして、ダウンロードエンドポイントに応答ヘッダーを追加することもできます。

  • Apache（.htaccess）/ nginx構成で設定する
  • コードから
4
theunexpected1

上記の解決策として、@ theunexpected1によるhtml5ダウンロード属性を使用します。サポートしていないブラウザの場合は、Aタグを削除して、ユーザーに右クリックまたはロングタッチを強制してダウンロードさせます。

<script>
var downloadAttrSupported = ("download" in document.createElement("a"))
if (!downloadAttrSupported){
   $('img.media').unwrap();
}
</script>
1
mikesl

ダウンロード属性のサポート： http://caniuse.com/download

オプションである場合は、サーバーにヘッダーを設定できます。送信するHTTPヘッダーはContent-Disposition：attachmentです。 filename = "imagename.jpg"。

サーバーによって異なります。

ノード/エクスプレス：

// only on imgs
function(req, res){
    res.setHeader('Content-disposition', 'attachment; filename=imagename.jpg');
}

HTMLでは：

<a href="imagename.jpg">Download link</a>

サーバーは、ファイルのリクエストを取得するとContent-Dispositionヘッダーを送信し、ブラウザーにダウンロードを強制します。

0
John Williams