У меня есть этот веб-сайт, где мне нужно иметь возможность делать «моментальные снимки» анимированного 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 {}
Стоит ли использовать вариант веб-работника, зная, что мне понадобятся такие вещи, как:
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, чтобы посчитать, но их всегда можно превратить в функции)
src
для<img>
, никогда не добавлявшегося в DOM, копируется вcanvas
(опять же, вне DOM), а затем загружается в сервер. - person Sheraff   schedule 25.07.2017setTimeout(task, 0);
. Это, по крайней мере, гарантирует, что блокируются только отдельные задачи, а не весь конвейер. - person Jared Smith   schedule 25.07.2017