Is it possible to have JavaScript loading saved image instead of from server?

Question

I have a page that load a random image as background image. Something like this:

<!-- some other codes -->
<style>
.random-background {
    height: 100px;
    width: 100px;
    background-image: url("https://server-domain.com/random.php");
}
</style>
<div class="random-background"></div>
<!-- some other codes -->

https://server-domain.com/random.php will return a random image every time it is called, so using AJAX to call the link is not an option. I am writing a Chrome extension, so I have no control on the server behaviour. Is there a way, using JavaScript, I can get the exact image used as background as the user see on screen?

---

It may seems to be a duplicated with this question. The difference is in this question, the target element is a div instead of img, so in the suggested solution to that question,

context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

won't work. This will be the error message

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at :6:9

Answer 1

I'm posting this as a potentially viable solution, but ultimately this depends on the CORS policy of the server generating the random images.

This somewhat uses the concept from Javascript: how to get image as bytes from a page (without redownloading), however to answer the differences outlined by OP, this works a little different.

The idea is that the image is first downloaded using JavaScript and applied to an Image() object created by JavaScript. When the image is done loading, it is then loaded into a canvas object on which we can apply toDataURL(). Finally this new image data can be applied to the background-image property of the <div> element and also used anywhere else needed (it would just need to be saved as global variable).

The server CORS policy has not been disclosed by OP nor has what OP needs to do with the image data, so that is not being addressed in this answer.

const _Base64Image = url => {
  const img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL("image/png");
    _SetBG(document.querySelector("#imgTest"), dataURL, img.width, img.height);
  }
  img.src = url;
}
const _SetBG = (el, data, w, h) => {
  el.style.width = `${w}px`;
  el.style.height = `${h}px`;
  el.style.backgroundImage = `url("${data}")`;
}

_Base64Image('https://nathanchapman.gallerycdn.vsassets.io/extensions/nathanchapman/javascriptsnippets/0.2.0/1510271465098/Microsoft.VisualStudio.Services.Icons.Default');

.random-background {
    height: 100px;
    width: 100px;
}

<div id="imgTest" class="random-background"></div>

Answer 2

Why you want to do this is still a mystery to me, and the following is surely a bad idea in most cases. It will cause performance issues. But if you really need it, here goes...

You can achieve this by intercepting each image request so that you can always store the response in JS before the browser can start using it. This could get very costly, especially if you need to perform this on every request.

All you have to do is make a web worker listen to the fetch event.

Something like this:

const images = {};

function doAnythingWith(request, response) {
    // response.url would not work as it changes on redirects.
    // request.url should have the URL from the CSS.
    images[request.url] = response.body;
}

self.addEventListener("fetch", (event) => {
  if (event.request.method !== "GET") return;
  
  // Optionally include some exlusion logic here.
  // Maybe by domain or file extension.
  
  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      
      const response = await fetch(event.request);

      doAnythingWith(request, response);
      
      return response;
    })()
  );
});

self.addEventListener("message", (event) => {
  if (event.type !== "get-loaded-image") return;
  
  return images[event.payload.url];
});

Then you should be able to get the image for any given URL, and it will be the one that the user got.

myWorker.postMessage({type: "get-loaded-image", payload: someUrl});

You can store this with the URL as a key. You can then send messages to this worker to retrieve the original content for a URL.

Or perhaps you don't need to send a message at all and execute all your logic directly in the worker.