svg, canvas, web workers. Помогайте!
 

Встрял тут с одной задачей. Нужно делать скриншот документа, уменьшать и сохранять превьюшку.

Всё это отлично делает этот плагин https://github.com/tsayen/dom-to-image (есть ещё html2canvas но он в 10 раз тяжелее и, думаю, имеет такие же проблемы)

К сожалению, на тяжелых страницах он сильно тормозит и блокирует основной. Там есть два узких места:

1) клонирование нод. Чтобы сделать svg нам нужно скопировать все стили на каждую ноду с помощью getComputedSyles. На ноду приходится ~6kb стилей (любой проект с бутстрапом) и когда на стриничке около 6000 нод всё это лагает не по детски. Впрочем, эту проблему я решил, разрывая поток выполнения каждые 30 мс.

2) создание изображения. Вот тут всё серьезно. Мы получаем svg dataUrl и должны преобразовать его в canvas. Длина строки dataUrl около 30 млн символов и создание изображения занимает около секунды

return new Promise(function (resolve, reject) {
    var image = new Image();
    image.onload = function () {
        resolve(image);
    };
    image.onerror = reject;
    image.src = uri; //Это место - корень зла
}).then(function (image) {
    var canvas = newCanvas(domNode);
    canvas.getContext('2d').drawImage(image, 0, 0);
    return canvas;
})

Логично было бы перенести эту работу в воркер, но там нельзя работать с домом. Другими словами, там нет Image. Здесь у меня и затык.

Кто что посоветует?

Прям на странице плагина описаны иные варианты его использования, зачем выбирать самый кривой из них?..

Вы о чем? Любой метод вызывает внутри draw, который преобразует dataSvg (весом 30МБ в моем случае) в canvas так как я описал.

Вопрос не о том как настроить плагин. Его нельзя настроить без переписывания. Вопрос к людям имеющим достаточно глубокие знания по svg/canvas и web workers. Что можно сделать, чтобы хотя бы перенести узкое место в фоновый процесс