如何在 HTML 中为移动页面创建图像下载链接？答案

【问题标题】：How can I create an Image Download Link in HTML for a Mobile Page?如何在 HTML 中为移动页面创建图像下载链接？
【发布时间】：2014-04-15 19:13:53
【问题描述】：

我有一个包含图像的移动 html 页面。我想创建一个用于下载图像的按钮或链接。然后应将图像保存到用户的移动图像库中。

我看过这个帖子：How can I create download link in html?

解决办法

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

在桌面浏览器上工作，但在移动设备上不工作。

这是我制作的 JSFiddle：http://jsfiddle.net/tDVqH/4/

注意：图像是在浏览器中创建的，即在 HTML5 画布元素中。此图像可以使用 canvas.toDataUrl() 生成。生成的图像应保存到移动图像库中。

如何通过点击/点击将图像保存到用户的移动图片库？有没有带有未知标头的 ser 往返的 JavaScript 解决方案？

编辑：我还发现了以下问题，但没有答案。 Save an image to the local folder from the website by clicking a link or button in mobile browser 和 Save an image to a mobile phone gallery from a browser

【问题讨论】：

这可能有效：stackoverflow.com/questions/16124064/…
这可能有效：stackoverflow.com/questions/16124064/… 或此stackoverflow.com/questions/7461535/…
不是它在 iOS 上不起作用。
HTML5 下载属性不适用于 Safari，您应该找到任何替代方法。
我猜你正在为手机构建一个很棒的图像编辑器，它允许用户将他们的工作保存到他们的手机上。 mobile browsers 还没有准备好，因为网络应用程序没有安全的方式来交互和访问移动设备的文件系统。 HTML5 文件 API 已经走过了漫长的道路，甚至还有更长的路要走。即使有黑客攻击，它也可能会让你变得更糟，因为它可能无法跨移动设备工作。我最好的选择是选择符合要求的跨平台工具。只是我的两分钱。

标签： javascript html google-chrome mobile mobile-safari

【解决方案1】：

好像有人有answered this already，

<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 配置中进行设置
代码正确

【讨论】：

【解决方案2】：

使用 html5 下载属性作为上述@theunexpected1 的解决方案。对于不支持的浏览器，去掉A标签强制用户右键或长按下载

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

【讨论】：

【解决方案3】：

支持下载属性：http://caniuse.com/download

如果您愿意，您可以在服务器上设置标头。您要发送的 HTTP 标头是 Content-Disposition: attachment;文件名="图片名.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 标头并强制浏览器下载。

【讨论】：

但是如何使用您的解决方案在移动浏览器上下载图像？
但是如果您在浏览器中创建图像，例如，当您将画布转换为图像时呢？

【解决方案4】：

通常由浏览器打开的文件的强制下载可以通过图像所在目录中的 .htaccess 文件来完成。

之前在这里回复过：

Force a file or image to download using .htaccess

我还没有测试，所以不知道它是否适用于移动浏览器。

【讨论】：