Creating "Save Image As" and "Copy Image To Clipboard" buttons for a gallery

[Under S.]

Just realized I've never had to implement a "Save Image As" or "Copy Image To Clipboard" button... and now I need to do both for a series of images in a gallery-style webpage.

What's the best way to implement both buttons next to an image? Can this be done with HTML alone? Unless there's an existing script out there that will overlay the image with a prompt to Save or Copy if you click it. Those are the two simplest layouts I can think of at the moment.

Either way, whatever is easiest to implement would help me out.

Thanks!

PS: If it makes a difference, my site isn't currently using any JS (just turned out that way, not a conscious decision) but does use PHP to parse includes and variables (which is the extent of my PHP knowledge) in case this influences recommendations in any way.

[Nancy OShea]

No need to reinvent the wheel for this.

"Copy image" & "Save Image as" are built-in to your browser's right-click context menu.   See screenshot. 

[BenPleysier]

Try the 'download' attribute on the link as in

<img src="/images/myimage.jpg" alt="myimage">
<a download="myimage.jpg" href="/images/myimage.jpg">
    downkoad
</a>

Change the image name and path to suit.

[Under S.]

So there's a built-in "download" attribute I was unaware of, that will be helpful. Thanks. But this only takes care of the SAVE, right? Is there an equivalent attribute for "Copy To Clipboard"?

[Nancy OShea]

The Clipboard API

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

[Under S.]

Thinks, but I wish I knew the first thing about what I was looking at, there. Unfortunately, I'm more web design than web dev. Would it be possible to dumb down the syntax for me like Ben did for the Save? (Or point me to something with "for dummies" instructions?)

[Nancy OShea]

Would it be possible to dumb down the syntax for me like Ben did for the Save?

By @Under S.

========

I'm afraid not.  It's not simple for a lot of complicated reasons  -- HTTPS, which browsers people use, etc...

Thus this road leads back to browser's built-in feature, as mentioned in my first reply.  😉

[BenPleysier]

See:

https://openjavascript.info/2022/09/27/how-to-copy-an-image-to-the-clipboard-with-vanilla-javascript...

As @Nancy OShea has stated, the browser built-in context menu is the best (at the moment) solution.

[Nancy OShea]

Did you test it?  It doesn't work for me. 

For what it's worth, I've tested several scripts so far and they all fail. Probably due to my system's security  -- which is OK with me. 

[BenPleysier]

Yes, it does work. As the video explains, the copyToClipboard function only works on PNG's. That is why the images are first converted using writeToCanvas function.

https://youtu.be/FWRFCPZ614g

But as you have stated: "why re-invent the wheel?"