在 JavaScript 的 Web Worker 中创建映像(worker.js)

Question

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

Mozilla-Web_Workers_API

worker.js应在屏幕外显示图像，如此处所示：

Mozilla-OfscreenCanvas文档

最初的脚本使用的是下面的语句，显然不能在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

只是不要

与其导出画布内容并让浏览器解码该图像以显示它，不如直接显示HTMLCanvasElement

在您切换到"偏移屏幕"(OffsetcreenCavas(之前，此建议已经有效，但现在仍然有效。

那么如何在Worker中的OffscreenCnvas上绘制并仍然显示它好吧，你可以通过它的transferControlToOffscreen()方法从HTMLCanvasElement请求一个OffscreenCnvas。

因此，方法是，在UI线程中，您生成将用于显示图像的<canvas>元素，并从中生成偏移屏幕编码。然后启动Worker，将偏移屏幕编码传输到Worker
在Worker中，您将等待onmessage事件中的OffscreenCnvas，然后获取上下文并利用它。

UI线程

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绘制的图形都将绘制在可见的画布上，而不会阻塞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>