Javascript 如何为移动页面创建HTML格式的图像下载链接？

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

我看过这个帖子：

解决方案

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

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

下面是我制作的一个JSFIDLE：

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

如何通过单击/点击将图像保存到用户移动图像库？是否有一个JavaScript解决方案没有ser往返，但标题未知？

---

编辑：我还发现了以下问题，但它们没有答案。和

支持下载属性：

您可以在服务器上设置头，如果这是一个选项的话。要发送的HTTP头是内容处置：附件；filename=“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>

---

当服务器收到文件请求并强制浏览器下载时，将发送内容处置头。

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

此前在这里得到答复：

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

似乎有人测试过

尚未完全支持它http://caniuse.com/#feat=download，但您可以与Modernizer一起使用

（在非核心检测下）至 支持所有浏览器

没有测试过，但也可以在手机上使用

我想补充一点，作为服务器端解决方案，您还可以通过

• 在apache（.htaccess）/nginx配置中设置它
• 从代码开始

---

使用html5下载属性作为@TheUnexpected 1的上述解决方案。对于不支持它的浏览器，删除标签以强制用户右键单击或长按下载

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

var downloadAttrSupported=（document.createElement（“a”）中的“下载”）
如果（！DownloadAttr受支持）{
$（'img.media'）.unwrap（）；
}

但是如何使用您的解决方案在移动浏览器上下载图像？但是如果您在浏览器中创建图像，例如，当您将画布转换为图像时，该怎么办？这可能会起作用：这可能会起作用：或者这不起作用。HTML5下载属性不适用于Safari，你应该找到其他选择。我想你正在为手机构建一个很棒的图像编辑器，允许用户将他们的工作保存到手机上。

移动浏览器

还没有准备好，因为web应用程序没有安全的方式来交互和访问移动设备的文件系统。HTML5文件API已经走过了漫长的道路，甚至还有更长的路要走。即使有黑客攻击，它可能会让你更糟糕，因为它可能无法跨手机工作。我的最佳选择是开发一种符合要求的跨平台工具。只要我的两分钱。

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