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

How can I create an Image Download Link in HTML for a Mobile Page?

本文关键字：创建 图像 下载 链接 移动 HTML      更新时间：2023-09-26

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

我看过这篇文章:如何在html中创建下载链接?

解决方案

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

可以在桌面浏览器上运行，但不能在移动设备上运行。

这是我做的一个JSFiddle: http://jsfiddle.net/tDVqH/4/

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

如何保存图像到用户的移动图片库与点击/点击?有没有一个JavaScript的解决方案，没有一个未知的报头的服务器往返?

编辑:我也发现了以下问题，但他们没有答案。通过移动浏览器中的链接或按钮将图片从网站保存到本地文件夹，并从浏览器中将图片保存到手机图库

似乎已经有人回答了这个问题，

<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配置中设置
  • 直接从代码

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

你可以在服务器上设置报头，如果这是一个选项的话。你想要发送的HTTP报头是Content-Disposition: attachment;文件名= " 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报头，并强制浏览器下载。

使用html5下载属性作为上面的解决方案@theunexpected1。对于不支持的浏览器，删除A标签强制用户右击或长触来下载

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

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

前面已经回复过了:

使用.htaccess强制下载文件或图像

我还没有测试过，所以不知道它是否能在移动浏览器上工作。

相关文章：