сохранить ссылку на javascript canvas imageData

Question

Возможно ли сохранить ссылку на фактические изображения, а не называть getImageData для каждого кадра?

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

Когда страница загружается, я сначала создаю массив, который достаточно велик для хранения данных imageData.data, так что память не выделяется каждый кадр. Чтобы обновить этот массив, я должен вызвать getImageData в контексте холста. Если я запускаю javascript, как это, каждые пару секунд есть падение в fps от 60 до 20-30.

Когда я закомментировать строку, вызывающую getImageData, сценарий проходит гладко около 60fps

, например, этот код вызовет падение кадров

// initialize m_canvasData 
var m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data; 

// called every frame 
function loop() 
{ 
    m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data; 
} 

этот код не вызовет падение в кадре

var m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data; 

// called every frame 
function loop() 
{ 
    // m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data; 
} 

Я хотел бы просто сохранить ссылку на данные холст вместо вызова getImageData каждого кадра, если тот возможно.

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

Three.js как-то в состоянии получить 60fps, когда я дать ему холст, чтобы использовать в качестве текстуры, так что я знаю, что есть какой-то способ вокруг получения капли в кадре при получении данных холста

Существует только один нить в коде, поэтому я не верю, что это должна быть проблема с несколькими потоками, где getImageData должен ждать другой поток javascript (хотя, может быть, его ждет, когда браузер завершит рисование холста, но браузер освежает 60-61 fps, поэтому я не думаю, что это проблема)

Answer 1

Имеет смысл, что ваш FPS падает, если вы звоните .getImageData постоянно, потому что он включает в себя дублирование и передачу arge объем памяти. Кроме того, .getImageData не использует графический процессор, поэтому бремя загрузки передается на ваш, вероятно, занятый CPU.

Нет ... вы не можете сохранить «живую» ссылку на данные изображения холста.

var idata=context.getImageData(0,0,canvas.width,canvas.height); 

... возвращает статический «моментальный снимок» пикселей текущего содержимого холста. Если вы нарисуете что-то новое на холсте, то idata не будет содержать новый чертеж.

Ваш вопрос не содержит достаточно информации, чтобы помочь с более подробной информацией, но общим обходным решением является рефакторинг вашего приложения, чтобы не использовать .getImageData.