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

时间:2014-03-11 22:39:59

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

我有一个包含图片的移动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元素中创建的。可以使用canvas.toDataUrl()生成此图像。生成的图像应保存到移动图像库中。

如何通过点击/点按将图片保存到用户移动图片库?是否存在没有带有未知标题的ser往返的JavaScript解决方案?

编辑:我也发现了以下问题,但他们没有答案。 Save an image to the local folder from the website by clicking a link or button in mobile browserSave an image to a mobile phone gallery from a browser

4 个答案:

答案 0 :(得分:4)

有人似乎有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配置中设置
  • 直接来自代码

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

支持下载属性: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标头并强制浏览器下载。

答案 3 :(得分:-1)

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

此前有人回复:

Force a file or image to download using .htaccess

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