Встрял тут с одной задачей. Нужно делать скриншот документа, уменьшать и сохранять превьюшку.
Всё это отлично делает этот плагин
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. Здесь у меня и затык.
Кто что посоветует?