Question

我有这个网站，我需要能够在动画的不同阶段（慢速过程）拍摄动画SVG的“快照”。同时，动画正在运行（快速处理）。所以我正在创建一个克隆，在后台我将在不同的动画阶段序列化SVG并将生成的图像上传到服务器。

然而，所有这些在后台运行都非常慢，并且往往会减慢原始SVG的动画速度。是否可以在Web工作者中完成所有这些操作？如有必要，工作人员可以自行获取SVG源文件。

我已经知道传递DOM元素是不可能的：

//main.js
var s = new XMLSerializer();
worker.postMessage(s.serializeToString(svg))

//worker.js
parser = new DOMParser();
doc = parser.parseFromString(e.data, "text/html");

//ERROR
Uncaught ReferenceError: DOMParser is not defined

似乎只是传递一个对象也不是一个选项：

//main.js
worker.postMessage(JSON.stringify(svg))

//worker.js
svgObject = JSON.parse(e.data);
console.log(svgObject)

//console output (just an empty Object prototype)
Object {}

Web工作者选项是否值得追求，因为我知道我将需要以下内容：

XMLSerializer（因为DOMParser不可用，我不知道那个）
document.createElementNS(SVG_NAMESPACE, 'text')（我需要在SVG中创建元素）
var img = new Image(); img.src = 'data:image/svg+xml;utf8,' + svgString（我需要创建一个图像来捕获SVG的序列化版本）
element.style.strokeDashoffset = 0（我需要能够设置SVG样式）
SVGPolylineElement.prototype.getTotalLength（我在SVG类型原型上有几个polyfill来做我的数学运算，但这总是可以变成函数）

Answer 1

看起来您正在调用JavaScript指令＆＃39;使用严格的＆＃39;在你的代码中，在这种情况下你只需要声明你的＆＃34;解析器＆＃34;变量与＆＃34; var＆＃34;：

var parser = new DOMParser();

PS。谢谢，您的代码帮助我自己的浏览器扩展....

将元素（SVG）传递给Web worker

1 个答案: