如何为移动页面创建HTML图像下载链接? [英] How can I create an Image Download Link in HTML for a Mobile Page?

问题描述

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

I have a mobile html page which contains images. I want to create a button or a link which is used for a download of an image. The image should then be saved to the users mobile image gallery.

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

解决方案

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

在台式机浏览器中工作，但在移动设备上不工作.

is working in desktop browsers but not on mobile.

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

Here is a JSFiddle I made: http://jsfiddle.net/tDVqH/4/

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

Note: The image is created in the browser i.e., in a HTML5 canvas element. This image can be generated with canvas.toDataUrl(). The resulting image should be saved to the mobile image gallery.

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

我也找到了以下问题，但没有答案. 通过浏览器将图像保存到手机库中

I also found the following questions but they do not have an answer. Save an image to the local folder from the website by clicking a link or button in mobile browser and Save an image to a mobile phone gallery from a browser

推荐答案

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

<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 (在非核心检测) 支持所有浏览器.

http://modernizr.com/download/#-a_download (under Non-core detects) to support all browsers.

未经测试，但也可以在手机上使用.

Have not tested, but should work in mobiles as well.

我要补充一点，作为服务器端解决方案，您还可以通过以下方式将响应标头添加到下载终结点:

I would add that, as a server side solution, you could also add Response Headers to your download endpoint by

• 以apache(.htaccess)/nginx配置对其进行设置
• 直接从代码中获取

这篇关于如何为移动页面创建HTML图像下载链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！