Click to Copy Image Using Browser Component

[TMR]

Hi All,

I’m trying to set up an action on a button to copy a QR code using the browser component.

However, when I look at my browser component (Wappler 6.5.2 stable) all I can see is ‘Write text to clipboard’ and there is no way to select my image:

I’ve seen older versions of this in this form that show a ‘Copy to clipboard’ choice.

Am I doing something wrong here?

[Cheese]

We do a similar thing with QR codes but on click they copy the link to the page to the Clipboard.

Or a simple Codepen example here Tom. This will prompt to save the image on click if that helps…

[TMR]

I was looking to copy the image as the reason for it is for the client to copy the image so it can be printed off / sent to printing departments so it can be printed to magnetic stickers etc.

Thanks for the Codepen, that’s exactly what I’m after and I’ll implement it, it would be great if Wappler could do this natively though.

[patrick]

I believe the old Copy to clipboard you are referring to was using execCommand('copy') and copied the selected item to the clipboard. This method is however deprecated and not longer recommended.

Document: execCommand() method - Web APIs | MDN

The new Clipboard API is supported by all mayor browsers and allows you to read/write the clipboard async. The API only works for websites served using https and require user permissions. The writeText is supported by all browsers, the write is supported by most but not by Firefox (it is in the latest nightly).

Copying an image also isn’t that simple with the new API, see following article:

Unblocking clipboard access  |  Articles  |  web.dev

Is there a reason why you want to copy the QR code as an image? Why not copy the url or the text content that the QR code actual represents.

[TMR]

Thanks for that update, it looks like I’ll have to try and find another way to do that.

My use case is as follows:

@TMR

Thanks for that update, I’ve spent a fair bit of time on that too - I am already loading live from the API in an <img> tag but I need it to save as I’m using dynamic image rendering by the excellent www.cloudimage.io - the main image is resized and optimised using dynamic urls, they work perfectly, but adding a qrcode as a watermark is problematic as the url for cloudimage needs an actual file and not a generated one from an API.

On the page, I’m using this to resize/optimise image:
<img alt="image" title="image" dmx-bind:src="'https://xxxxxxxxx.cloudimg.io/toms-url.com'+imgFile+'?func=crop&amp;width=300'" id="aa">

to add the qr code watermark, I’d need to use the URL of a file (this can be dynamically generated, same as the image url above), it looks something like this:
<img alt="image" title="image" dmx-bind:src="'https://xxxxxxxxx.cloudimg.io/toms-url.com'+imgFile+'?func=crop&amp;width=300&wat=1&wat_url=http://sample.li/qr-code-image-link-here.png&wat_scale=45&wat_gravity=southeast&wat_pad=15'" id="aa">

Its working great for logos, but I really need a QR code in there as well.

[patrick]

Why not a button to download the image instead of copy to clipboard, many programs don’t support pasting image from clipboard and accessing clipboard from the browser requires extra permissions.