How to get the cached image of the browser?

Taking this approach will likely cause all manner of headaches for you, as the caching scheme of inline images isn't really defined or maybe better said, you never know how long a browser will cache this type of image.

Better to just generate images at server end + add some sort of cache busting tag, like foo-1.2.png + then increment the version number + reference the new version number in your HTML.

I do this with jquery, for example I know jquery-3.2.1.min.js will never change, so when an update occurs, each reference becomes query-3.2.2.min.js in my HTML.

This way I can set expires tags on this type of file for a far future date, like 10 years, so once it's in a person's browser cache, it's there forever + never loads of a server again.

Thank you for your reply, David Favor! Can we say that all browsers will cache the image as long as it is visible? If so, it is enough caching for me, as I only need the displayed image for the database. Then, I have somehow to create a handle to the image next time I load the div element from the record & assign the image saved in another attribute of the same record to this URI to make it visible at a later time.

To save the image, what I need is in pseudo-code something like

var cache = new BrowserCache();

var imageURL= cache.querySelector('url["blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56"]');

var image = cache.getElement(imageURL);

// Convert image to appropriate format, if necessary
// Add image information to record to be sent to the server

Select allOpen in new window

This was the solution I found for this question.