图像预览的“保存按钮”[关闭]

Question

I have a website as I describe for you:

When the user opens a page and clicks on the thumbnail image under post title, a preview of that image is displayed.

I want to put a little icon in any corner of the preview for saving the image. This way the user can save the image by clicking on save button.

When I Googled this I found some results and as you can see here, I made that button. But it won't work correctly and now I'm stuck.

Can you please look and tell me where I am going wrong?

http://magezz.com/games/god-of-war-2018-cheats-walkthrough-hints/

Answer 1

Using HTML5 you can add the attribute 'download' to your links.

<a href="/path/to/image.png" download>Save Image</a>

Compliant browsers will then prompt to download the image with the same file name (in this example image.png).

If you specify a value for this attribute, then that will become the new filename:

<a href="/path/to/image.png" download="AwesomeImage.png">Save Image</a>

UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create <a href="https://i.imgur.com/IskAzqA.jpg" download> on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement