xmoonlight, смотрите как должно работать:
когда каждый раз изменяется канвас, то его миниатюра тоже обновляется, типа лайв-превью, как в гугл презентациях.
Обратите внимание на выделенную миниатюру слева, она активна и изменяется каждый раз, когда изменится артборд (переместиться, добавится, удалиться, измениться объект)
xmoonlight, потому, что это не игра и не ролики) это конструктор презентаций. каждый слайд это канвас. малейшее изменение в канвасе сохраняет json канваса в бд + миниатюрю (для лайв превью)
xmoonlight, все работает, все классно. единственное, мне сейчас сказали, что таким образом память в 2 раза больше расходуется, больше 200 мб. как это можно проверить не подскажете?
var destinationCanvas = document.createElement('canvas') // и не вставлять в DOM
var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(sourceCanvas, 0, 0);
// ну а тут уже canvas.toDataURL()
Hyubert, проблема в том, что canvas.toDataUrl работает медленно, я сделать canvas.toBlob и потом objectURL = URL.createObjectURL ( blob ) и лагов нет. но для safari и edge нет toBlob, по этому надо полифил ставить. в общем дичь.
ниже написал человек интересную идею, я не понял как это сделать правда, но надеюсь он приведет пример.
Hyubert, к сожалению нет. по гуглу я понял, что это частая проблема, но решения не нашел. посоветовали через воркер реализовать, отпишусь если получится
Alex, ну кода то особенно и нет, уже удалил, думаю переделать. А сделать я хочу следующее: создать компонент vue, инициализировать там инстанс канваса, который как раз будет применяться к $el комплнента. Ну и чтобы другие компоненты могли иметь к нему доступ, к примеру нужно поменять свойства инстанса.
Alex, ну я же инстанс в компоненте хочу оформить, чтобы он как бы был в связи с компонентом vue, а иначе придется еще дополнительную логику писать и минус реактивность
