如何在HTML中為移動頁面創建圖像下載鏈接？

Question

我有一個包含圖像的移動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解決方案沒有帶有未知頭的ser往返？

編輯：我也發現了以下問題，但他們沒有答案。 通過單擊移動瀏覽器中的鏈接或按鈕並從瀏覽器將圖像保存到手機庫 ， 將圖像 從網站保存到本地文件夾

Answer 1

有人似乎已經回答了這個 ，

 <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配置中進行設置
• 從代碼開始

Answer 2

使用html5下載屬性作為@theunexpected1的上述解決方案。 對於不支持它的瀏覽器，刪除標簽以強制用戶右鍵單擊或長按以下載

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

Answer 3

支持下載屬性： http ： //caniuse.com/download

您可以在服務器上設置標頭，如果這是您的選項。 您要發送的HTTP標頭是Content-Disposition：attachment; 文件名= “imagename.jpg”。

根據您的服務器而有所不同..

在Node / Express中：

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

在HTML中：

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

服務器在獲取文件請求時會發送Content-Disposition標頭並強制瀏覽器下載。

Answer 4

通常由瀏覽器打開的文件強制下載可以使用圖像所在目錄中的.htaccess文件來完成。

它先前在這里回復：

使用.htaccess強制下載文件或圖像

我沒有測試過，所以不知道它是否適用於移動瀏覽器。