Perché il valore di ImageData è così lento?

Question

Sto lavorando con una tela di dimensioni relativamente grandi in cui vengono disegnate varie cose (complesse). Quindi voglio salvare lo stato della tela, quindi posso resettarlo velocemente allo stato in cui si trova ora in un secondo momento. Io uso getImageData per questo e memorizzo i dati in una variabile. Quindi disegno un po 'di più sulla tela e successivamente ripristinerò la tela dove era quando ho salvato il suo stato, usando putImageData.

Tuttavia, risulta che ImageData è molto lento. Infatti, è più lento del semplice ridisegnare l'intero Canvas da zero, il che implica diversi DrawImage che coprono la maggior parte della superficie e oltre 40.000 operazioni lineTo seguite da tratti e riempimenti.

Il nuovo disegno di una tela di circa 2000 x 5000 pixel da zero richiede ~ 170 ms, utilizzando putImageData richiede ben 240ms. Perché ImageData è così lento rispetto al ridisegnare la tela, sebbene il ridisegno della tela comporti il ​​riempimento dell'intera tela con drawImage e quindi riempiendo circa il 50% della tela con poligoni usando lineTo, stroke e fill. Quindi, in sostanza, ogni singolo pixel viene toccato almeno una volta durante il ridisegno.

Perché drawImage sembra essere molto più veloce di mettere ImageData (dopo tutto, la parte drawImage di ridisegnare la tela richiede meno di 30 ms). Ho deciso di provare a salvare lo stato della tela non usando getImageData, ma invece di usare canvas.toDataURL e quindi creare un'immagine dall'URL dei dati che avrei incollato a drawImage per disegnarla sulla tela. Risulta che questa intera procedura è molto più veloce e richiede solo circa 35ms.

Quindi, perché ImageData è molto più lento delle alternative (utilizzando getDataURL o semplicemente ridisegnando)? Come potrei accelerare ulteriormente le cose? C'è e se, qual è in generale il modo migliore per memorizzare lo stato di una tela?

(Tutti i numeri sono misurati usando Firebug dall'interno di Firefox)

Answer 1

Solo un piccolo aggiornamento su ciò che il miglior il modo è farlo. In realtà ho scritto la mia tesi di laurea su High Performance ECMAScript and HTML5 Canvas (pdf, tedesco), quindi ho raccolto alcune conoscenze su questo argomento ormai. La soluzione migliore è usare più elementi canvas. Disegnare da una tela su un'altra tela è altrettanto veloce quanto disegnare un'immagine arbitary su una tela.Quindi "memorizzare" lo stato di una tela è altrettanto veloce che ripristinarlo di nuovo quando si usano due elementi di tela.

This jsPerf testcase mostra i vari approcci e i loro vantaggi e svantaggi molto chiaramente.

Solo per completezza, ecco come realmente dovrebbe farlo:

// setup 
var buffer = document.createElement('canvas'); 
buffer.width = canvas.width; 
buffer.height = canvas.height; 


// save 
buffer.getContext('2d').drawImage(canvas, 0, 0); 

// restore 
canvas.getContext('2d').drawImage(buffer, 0, 0); 

Questa soluzione è, a seconda del browser, fino a 5000X più veloce di quello ottenere i upvotes.

Answer 2

In primo luogo si dice che si sta misurando con Firebug. In realtà, trovo che Firebug rallenta notevolmente l'esecuzione di JS, quindi potresti non ottenere un buon numero di prestazioni.

Quanto putImageData, sospetto è perché le funzioni richiede un grande array JS contiene molti Number oggetti, i quali devono essere controllati per la gamma (0..255) e copiato in un buffer di tela nativo.

Forse una volta che i tipi ByteArray WebGL sono disponibili, questo genere di cose può essere reso più veloce.

Sembra strano che la decodifica base64 e decomprimere i dati (con l'URL dei dati PNG) è più veloce, ma che chiama una sola funzione JS con una corda di JS, quindi sta usando il codice per lo più nativi e tipi.

Answer 3

In Firefox 3.6.8 sono stato in grado di aggirare la lentezza di putImageData utilizzando toDataUrl/drawImage. Per me sta funzionando abbastanza veloce che posso chiamare entro la gestione di un evento MouseMove:

Per salvare:

savedImage = new Image() 
savedImage.src = canvas.toDataURL("image/png") 

La ripristinare:

ctx = canvas.getContext('2d') 
ctx.drawImage(savedImage,0,0)