HTML5 Canvas: возможно ли сделать скриншот канваса при изменении объекта без лагов?
Пишу приложение где есть рабочая область (canvas, и работа с элементами в нем - картинки, текст) и есть панель слайдов.
Задумка такая: Когда создается слайд, появляется канвас, в нем идет работа с элементами, добавление, перемещение, вращение и т.д. и при каждом изменении канваса я делаю его скриншот и сразу подставляю dataUrl скриншота в панель слайдов, в активный слайд. Получается живая превьюшка, на подобии как в гугл презентациях.
Все работает, но есть один неприятный нюанс: при скриншоте канваса, если к примеру элемент передвигается (а скриншот делается при каждом изменении канваса), то он подлагивает.
Подскажите пожалуйста, возможно ли как-нибудь решить эту проблему?
Hyubert, к сожалению нет. по гуглу я понял, что это частая проблема, но решения не нашел. посоветовали через воркер реализовать, отпишусь если получится
Hyubert, проблема в том, что canvas.toDataUrl работает медленно, я сделать canvas.toBlob и потом objectURL = URL.createObjectURL ( blob ) и лагов нет. но для safari и edge нет toBlob, по этому надо полифил ставить. в общем дичь.
ниже написал человек интересную идею, я не понял как это сделать правда, но надеюсь он приведет пример.
thehighhomie, главное: анимашка 60fps, запись видео 5-10fps.
Если нужно именно 60fps - то лучше вначале набрать "сырой" массив объектов нужного региона без конвертации, и уже потом - обрабатывать.
