javascript - 在 JavaScript 的 Web Worker (worker.js) 中创建图像

Question

我正在重写一个小的 javascript，以便能够将它放在 worker.js 中，就像这里记录的那样:

Mozilla - Web_Workers_API

worker.js 应像此处记录的那样在 OffscreenCanvas 上显示图像:

Mozilla - OfscreenCanvas documentation

初始脚本使用以下语句，显然不能在 worker.js 文件中使用，因为没有“文档”:

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

但是我该如何替换

document.createElement("img");

worker.js 中仍然可以使用第二条语句的语句:

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

如果有人有任何想法，将不胜感激。 :)

Answer 1

就是不要。

不是导出 Canvas 内容并让浏览器解码该图像只是为了显示它，只需直接显示 HTMLCanvasElement。

此建议在您切换到 OffscreenCanvas 之前就已经有效，但现在仍然有效。

那么如何在 Worker 中的 OffscreenCanvas 上绘制并仍然显示它？ 我听到你问了。

好吧，您可以通过 HTMLCanvasElement 的 transferControlToOffscreen() method 从 HTMLCanvasElement 请求 OffscreenCanvas .

所以要走的路是，在 UI 线程中，生成 <canvas>将用于显示图像的元素，然后从中生成一个 OffscreenCanvas。然后启动您的 Worker，您将向其传输 OffscreenCanvas。
在 Worker 中，您将等待 onmessage 事件中的 OffscreenCanvas 并获取上下文并在其上绘制。

界面线程

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

工作线程

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

Worker 绘制的所有图形都将绘制在可见的 Canvas 上，完全不会阻塞 UI 线程。

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>