传递元素（SVG）给网络工作者

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

但是，所有这些在后台运行都非常缓慢，并且会降低原始SVG的动画速度。网络工作者可以做到这一切吗？如有必要，工作人员可以自行获取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不是av ailable，我不知道这个问题的）
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型样机一对夫妇polyfills做我的数学，但是这总是可以变成功能）

来源

2017-07-25 Sheraff

你不能使用网络工作者触摸DOM，这听起来像是在放慢你的动画。如果在发生这种情况时捕获它并不重要，请在空闲时间内在屏幕外进行拍摄并在那里捕捉快照。这样你就可以避免实际绘制通常是昂贵部分的SVG。 –

@JaredSmith是的，当它发生时绝对没有必要捕获它。无论如何，动画都是在快照完成之前结束的！但该网站是关于浏览这种动画，所以我永远不知道什么时候会有空闲时间或多久。因此，使用网络工作者的想法。 – Sheraff

@JaredSmith现在，它是在一个从未实际添加到DOM的克隆上完成的，然后序列化并用作''的'src'，但是它们从未添加到DOM，也没有被复制到“画布”（同样，关闭DOM），然后上传到服务器。 – Sheraff

看起来像您呼叫的JavaScript指令'严格'在哟ur代码，在这种情况下，您只需要声明“var”为“parser”变量：

var parser = new DOMParser();

PS。谢谢，你的代码可以帮助我用我自己的浏览器扩展...。

来源

2017-09-29 05:11:19

我绝对不会打电话'严格使用'。我从来没有做。我喜欢凌乱的代码:)那么，那对你有用吗？ – Sheraff

当JavaScript的DOMParser API没有'use strict'时，通常会导致ReferenceError'Uncaught ReferenceError：DOMParser未定义'。（PS我也喜欢杂乱的代码，但'严格使用'删除了许多定时炸弹 - 我年轻的编码器:) –

传递元素（SVG）给网络工作者

回答

相关问题