Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.09.2018, 20:21
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

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. Здесь у меня и затык.

Кто что посоветует?
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2018, 20:33
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Прям на странице плагина описаны иные варианты его использования, зачем выбирать самый кривой из них?..
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2018, 02:38
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разработка игры: отрисовка карты - CANVAS vs SVG Роман Андреевич Элементы интерфейса 1 04.05.2018 09:41
object (svg) сквозь canvas Герасим (X)HTML/CSS 0 04.12.2017 13:29
Можно ли использовать анимацию svg внутри canvas? Negotiant Общие вопросы Javascript 0 30.08.2017 10:56
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 16:59
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05