我正在开发一个网页，对 SVG 字符串数据进行一些相当繁重的处理。因为这些字符串的大小可能达到 m/bs，所以我想将 SVG 的渲染（取决于浏览器）移至工作人员，以避免阻塞 UI。
我的问题是，worker 中无法访问 DOM 元素 - 有没有办法仅使用 SVG 字符串将 SVG 绘制到 OffscreenCanvas 的 2D 上下文？或者有没有办法将字符串转换为可以传递给工作人员的数据格式？
昨天用 HTML canvas 回到了我的爱好，并尝试在单独的线程中进行渲染，只是在控制台中遇到以下错误：
未捕获的 DOMException：无法在“Worker”上执行“postMessage”：无法克隆 OffscreenCanvas，因为它已分离。在主要（http://localhost:8000/responsivetemplate/:47:14）
[索引.html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
<title>OffscreenCanvas</title>
</head>
<body>
<div id='wrapper'>
<div id='content'>
<canvas id="testcanvas" width="512" height="512"></canvas>
</div>
</div>
</body>
<script>
'use strict';
document.body.onload = function () {
var canvas = document.getElementById('testcanvas');
canvas.imageSmoothingEnabled = false;
const …我正在重写一个小的 javascript，以便能够将其放入worker.js 中，就像这里记录的那样：
worker.js 应在 OffscreenCanvas 上显示图像，如下所示：
初始脚本使用以下语句，显然不能在worker.js文件中使用，因为没有“文档”：
var imgElement = document.createElement("img");
imgElement.src = canvas.toDataURL("image/png");
但我怎样才能代替
document.createElement("img");
在worker.js中声明仍然可以使用第二个语句：
imgElement.src = canvas.toDataURL("image/png");
如果有人有任何想法，我们将不胜感激。:)
大家好，我有一个非常复杂的画布编辑器，允许用户使用 Konvajs 和 Gifler 库选择视频背景、添加文本、gif 和 Lottie 动画。它已经走了很长一段路，但是我正在尝试加快我的画布应用程序的性能。我已经阅读了很多关于屏幕外画布的内容，但我不太明白。假设我有一个常规的 HTML 画布对象，我将如何创建一个离屏画布并将其吐回浏览器？理想情况下，我希望能够以 30 fps 的速度从画布中以无延迟的速度从数组中获取图像。我还担心，根据caniuse.com 的说法，屏幕外画布似乎尚未得到广泛支持。每当我尝试从我的画布创建屏幕外画布时，我总是得到：
Failed to execute 'transferControlToOffscreen' on
'HTMLCanvasElement': Cannot transfer control from a canvas that has a rendering context.
正如我所说，我只是想弄清楚如何平滑地渲染我的动画，但不知道如何去做。这里的任何帮助都会很棒。这是代码。
<template>
<div>
<button @click="render">Render</button>
<h2>Backgrounds</h2>
<template v-for="background in backgrounds">
<img
:src="background.poster"
class="backgrounds"
@click="changeBackground(background.video)"
/>
</template>
<h2>Images</h2>
<template v-for="image in images">
<img
:src="image.source"
@click="addImage(image)"
class="images"
/>
</template>
<br />
<button @click="addText">Add Text</button>
<button v-if="selectedNode" @click="removeNode">
Remove selected {{ selectedNode.type }}
</button>
<label>Font:</label>
<select v-model="selectedFont">
<option value="Arial">Arial</option>
<option …