点击图片触发手机浏览器下载

Question

I try to add a feature that allow user to click a thumbnail and download the original picture to their computer or mobile phone from their browser.

I have successfully done it at desktop browser with <a href="source" download></a> .

However, this doesn't work with mobile browser apps like ios Safari, etc.

Does anyone know how to implement this for mobile browser?
Or is it available ?
I really need some help, thanks...

Note:

The image is totally from front-end.

The process is like:
1. Someone upload the image
2. Functions print image to canvas
3. Adding text using canvas API context
4. Output to image source from canvas
5. Download the source ( Issue is in this step)

Answer 1

you should set name for atr download.

<a href="source" download="test.png"></a>

pay attention to source of image. if you use image from sub domain or other domain, this will not work.i think that its for security and browsers in new update not allow direct download from other origin . i also set allow origin to sub domain in header of site, but its not work.

so the solution is: use this tag in header of request of images. it is a sample that i used in asp.net

this.Response.AddHeader("Content-Disposition", "attachment; filename=\"" + dname + extention + "\"");