HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?

Question

[thehighhomie]

Пишу приложение где есть рабочая область (canvas, и работа с элементами в нем - картинки, текст) и есть панель слайдов.

Задумка такая: Когда создается слайд, появляется канвас, в нем идет работа с элементами, добавление, перемещение, вращение и т.д. и при каждом изменении канваса я делаю его скриншот и сразу подставляю dataUrl скриншота в панель слайдов, в активный слайд. Получается живая превьюшка, на подобии как в гугл презентациях.

Все работает, но есть один неприятный нюанс: при скриншоте канваса, если к примеру элемент передвигается (а скриншот делается при каждом изменении канваса), то он подлагивает.

Подскажите пожалуйста, возможно ли как-нибудь решить эту проблему?

Comments

[Hyubert]

Можете куда то виложить? А то так гадать - пальцем в небо.

[thehighhomie]

Hyubert, к сожалению нет. по гуглу я понял, что это частая проблема, но решения не нашел. посоветовали через воркер реализовать, отпишусь если получится

[Hyubert]

thehighhomie, ок, а то мне интересно в чем проблема.

[thehighhomie]

Hyubert, проблема в том, что canvas.toDataUrl работает медленно, я сделать canvas.toBlob и потом objectURL = URL.createObjectURL ( blob ) и лагов нет. но для safari и edge нет toBlob, по этому надо полифил ставить. в общем дичь.

ниже написал человек интересную идею, я не понял как это сделать правда, но надеюсь он приведет пример.

[xmoonlight]

thehighhomie, главное: анимашка 60fps, запись видео 5-10fps.
Если нужно именно 60fps - то лучше вначале набрать "сырой" массив объектов нужного региона без конвертации, и уже потом - обрабатывать.

[Hyubert]

thehighhomie, спасибо, что отписали

[thehighhomie]

xmoonlight, это я тоже не пойму(

[thehighhomie]

Hyubert, решение в ответе xmoonlight

[Hyubert]

thehighhomie, да, спасибо я понял, а о проверке памяти можно через devtools, там есть вкладка memory, если нет то можно добавить из "more tools"

[thehighhomie]

Hyubert, да я видел, но она странно работает :D мне кажется лучше в самой ОС проверять

Answer 1

[xmoonlight]

Всё просто.
Чтобы снять скрин - нужно время: T1
Чтобы перерисовать сцену/объект - нужно время: T2
А вот чтобы сделать копию региона canvas - нужно время T3.
Подытожим: T1>T2>T3

Чтобы снять быстро скрин, нужно:
1. Получить нужный регион из визуальной сцены (игрового canvas'a) в переменную
2. Создать новый объект канваса в памяти (без помещения в DOM!)
3. Скопировать в него изображение из переменной
4. Сохранить куда нужно

Копирование - тут.
После того, как заберёте фрагмент - сразу переходите в асинхронный режим, передав сохранение воркеру. Ну и каждый кадр сохранять (60fps) - не советую, если это возможно.

Comments

[thehighhomie]

я если честно не понимаю как это сделать? можете пример скинуть?

[xmoonlight]

thehighhomie, пока нет времени на создание рабочего кода, но там довольно всё просто и алгоритм - я уже привёл...

[thehighhomie]

xmoonlight, это похоже на то, что выимеете ввиду? https://stackoverflow.com/questions/4405336/how-to...

[thehighhomie]

xmoonlight,

var destinationCanvas = document.createElement('canvas') // и не вставлять в DOM
var destCtx = destinationCanvas.getContext('2d');

destCtx.drawImage(sourceCanvas, 0, 0);

// ну а тут уже canvas.toDataURL()

[xmoonlight]

thehighhomie, я этот линк как раз в ответ уже и добавил! :)

[thehighhomie]

xmoonlight, ахах) сорян) спасибо) ну я попробую сейчас)

[thehighhomie]

xmoonlight, все работает, все классно. единственное, мне сейчас сказали, что таким образом память в 2 раза больше расходуется, больше 200 мб. как это можно проверить не подскажете?

[xmoonlight]

thehighhomie, В devtools есть много инструментов, включая "Память" и "Canvas". И, разумеется, память будет потребляться больше, т.к. всё зависит от длины ролика.
Если вы создадите систему динамической обработки очереди "шотов" несколькими воркерами, то размер памяти плавно переползёт в увеличенную загрузку CPU.

Вопросы:
1. а почему именно рендер именно на клиенте?!
2. почему не работать именно с json-матрицей отдельных объектов для их позиционирования и перемещения с помощью JS и без рендера в "шоты"?

[thehighhomie]

xmoonlight, потому, что это не игра и не ролики) это конструктор презентаций. каждый слайд это канвас. малейшее изменение в канвасе сохраняет json канваса в бд + миниатюрю (для лайв превью)

[xmoonlight]

thehighhomie, вопрос был не про сохранение, а про рендеринг во время показа.
Не могу понять: зачем каждый кадр то растрить?
Можно сказать, например:
"надпись появляется на позиции X,Y на 00:02сек, шрифт такой, размер, такой, исчезает через 00:10сек" (всё это хранится в JSON для каждого объекта сцены).
Т.е. сделать как проигрыватель объектов по тайм-шкале, а части тайм-шкалы - это и будут слайды презентации.

[thehighhomie]

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

Обратите внимание на выделенную миниатюру слева, она активна и изменяется каждый раз, когда изменится артборд (переместиться, добавится, удалиться, измениться объект)

[thehighhomie]

xmoonlight, если бы я мог придумать как можно сделать как-то по лучше такое поведение то я бы с радостью сделал)

[xmoonlight]

thehighhomie, зачем каждый кадр то рендирить на миниатюру?!)
1. рендерите только изменения
2. пока идёт ресайз или перетаскивание - проверку изменений вообще не производите.
3. надеюсь, это Вы видели: interactjs.io

[thehighhomie]

xmoonlight, Видел. И я делаю скриншот только по событию изменения объекта. он не делает скрин во время перертаскивания или ресайза

[xmoonlight]

thehighhomie, Тогда вот это:

Все работает, но есть один неприятный нюанс: при скриншоте канваса, если к примеру элемент передвигается (а скриншот делается при каждом изменении канваса), то он подлагивает.

Как происходит? (сорри, но не могу понять)

[thehighhomie]

xmoonlight, тут я тупанул, прошу проещние, я был очень уставший. при каждом изменении канвса но не во время изменения. пример с перемещением элемента: при перемещении не делается скриншот а когда перестаешь передвигать, то происходит событие и по событию делается скрин. короче во время каких-то действий скрин не делается, только тогда, когда это действие завершится.

а зачем вы интеракт в пример дали?)

[xmoonlight]

thehighhomie, ясно, я просто думал, что у Вас там "живые" элементы есть и их нужно кадр-в-кадр захватить.

интеракт - просто решил, что лишним не будет для визуальной пользовательской работы с объектами. (т.е., FYI)

[thehighhomie]

xmoonlight, спасибо)

[thehighhomie]

xmoonlight, вы не подскажете еще, есть возможность масштабировать канвас для скрина, чтобы не только холст изменился в размерах но и его элементы, чтобы можно было сделать полноценный скринл в любом размере? либо это в ручную нужно делать, обходя каждый элемент?

[xmoonlight]

thehighhomie, есть!
Вот моя демка даже.

[thehighhomie]

привет) сможешь помочь еще по канвасу в этом вопросе?) Fabricjs: установить границы для объектов?