How can I download image which is rendered with <img> tag?

Question

Let me explain my use case:

I have a page, where I fetch the image by the url (from remote host) and display it. Also, I have a button on the page. When clicked, the image should be downloaded. I want to download the image without making any other remote calls.

So overall I want to support two things with a single fetch of the image:

• Customer should be able to see the rendered image on the page.
• Customer should be able to download the image by clicking the button.

Can you help me with how can I do that?

Answer 1

Did you see window.location.href? https://www.w3schools.com/js/js_window_location.asp

in my reference project I was taking an image from the back end, making a URL.createObjectURL (img) and assigning a function to a button that simply does window.href.location = Processedimage on on: click. This way you can open the original image in another browser window, but again, I don't know how useful it will be. it is however a possible solution

Answer 2

There is actually no way to download the img tag directly, but you could use insert the image in an <a> element Like:

<img src="img_src">
<a href="img_src" download>
</a>

Is this what you mean?