Create an image in JavaScript's Web Worker (worker.js)

user_13420144 0
Viewed 1758

I'm rewritng a small javascript for being able to put it in a worker.js like it is documented here:

Mozilla - Web_Workers_API

The worker.js shall display an image on an OffscreenCanvas like it is documented here:

Mozilla - OfscreenCanvas documentation

The initial script is using the following statement that obviously cannot be used in a worker.js file, because there is no "document":

    var imgElement = document.createElement("img");
    imgElement.src = canvas.toDataURL("image/png");

But how can I substitue the

document.createElement("img");

statement in the worker.js for still being able to use the second statement:

imgElement.src = canvas.toDataURL("image/png");

If anyone has any idea, it would be really appreciated. :)

offscreen-canvas web-worker javascript
2 Answers

Just don't.

Instead of exporting the canvas content and make the browser decode that image only to display it, simply display the HTMLCanvasElement directly.

This advice already stood for before you switched to an OffscreenCanvas, but it still does.

Then how to draw on an OffscreenCanvas in a Worker and still display it? I hear you ask.

Well, you can request an OffscreenCanvas from an HTMLCanvasElement through its transferControlToOffscreen() method.

So the way to go is, in the UI thread, you genereate the <canvas> element that will be used for displaying the image, and you generate an OffscreenCanvas from it. Then you start your Worker to which you'll transfer the OffscreenCanvas.
In the Worker you'll wait for the OffscreenCanvas in the onmessage event and grab the context and draw on it.

UI thread

const canvas = document.createElement("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker(url);
worker.postMessage(offscreen, [offscreen]);
container.append(canvas);

Worker thread

onmessage = (evt) => {
  const canvas = evt.data;
  const ctx = canvas.getContext(ctx_type);
  //...

All the drawings made from the Worker will get painted on the visible canvas, without blocking the UI thread at all.

const canvas = document.querySelector("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker(getWorkerURL());
worker.postMessage(offscreen, [offscreen]);


function getWorkerURL() {
  const worker_script = `
  onmessage = (evt) => {
    const canvas = evt.data;
    const w = canvas.width = 500;
    const h = canvas.height = 500;
    const ctx = canvas.getContext("2d");
    // draw some noise
    const img = new ImageData(w,h);
    const arr = new Uint32Array(img.data.buffer);
    for( let i=0; i<arr.length; i++ ) {
      arr[i] = Math.random() * 0xFFFFFFFF;
    }
    ctx.putImageData(img, 0, 0);
    for( let i = 0; i < 500; i++ ) {
      ctx.arc( Math.random() * w, Math.random() * h, Math.random() * 20, 0, Math.PI*2 );
      ctx.closePath();
    }
    ctx.globalCompositeOperation = "xor";
    ctx.fill();
  };
  `;

  const blob = new Blob( [ worker_script ] );
  return URL.createObjectURL( blob );
}
canvas { border: 1px solid; }
<canvas></canvas>

user_37027970

While you can't create elements on the worker, you can send the result back to the main thread where the document object lives.

According to the docs of MDN you presented there is no toDataURL() method. But there is a OffscreenCanvas.convertToBlob() method that creates a Blob from the offscreen canvas.

Send the blob using postMessage to the main thread and continue there.

const offscreenCanvas = new OffscreenCanvas(1920, 1080);

const sendImage = async () => {
  const blob = await offscreenCanvas.convertToBlob({
    type: "image/jpeg",
    quality: 0.95
  });

  self.postMessage(blob);
};

sendImage();

Receive the Blob and create an image from it.

Note: canvas.toDataURL is basically a combination of a Blob with URL.createObjectURL(), so the end result will be the same.

const worker = new Worker('./worker.js');

const createImageFromBlob = blob => {
  const image = new Image();
  image.src = URL.createObjectURL(blob);
  return image;
};

worker.addEventListener('message', ({ data }) => {
  const image = createImageFromBlob(data);
});
user_116196470
Related