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

Question

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

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

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

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

Answer 1

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

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

context.drawImage(inMemoryCanvasElementReference,0,0); 

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