Самый эффективный способ повторно использовать нарисованный контент HTML5-холста

Question

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

Стратегия 1: использовать закадровый холст toDataURL() метод получения data: URI, который содержит изображение и который я могу программно установить на множественном img элементы на странице, которые должны отображать его.

Стратегия 2: использовать закадровый холст getImageData() метод получения ImageData пример. Заменить img элементы с canvas элементы и вызов putImageData() на них.

Какая стратегия более эффективна в отношении памяти? Что является более "идиоматическим"? Я пытаюсь избежать дублирования памяти, необходимой для хранения экземпляров отображаемых изображений. Другие предложения?

Answer 1

Используйте элементы canvas вместо img.

Затем нарисуйте холст в памяти на экранных холстах. Элемент canvas может использовать другой canvas в качестве источника drawImage:

context.drawImage(inMemoryCanvasElementReference,0,0);

Кстати, команды imageData (.getImageData а также .putImageData) очень неэффективны в памяти, потому что они создают целый новый массив данных пикселей. Им также не хватает производительности, потому что они не ускоряются на GPU.