Dlaczego plik putImageData jest tak wolny?

Question

Pracuję ze stosunkowo dużym płótnem, na którym rysuje się różne (złożone) rzeczy. Następnie chcę zapisać stan Canvas, więc mogę szybko zresetować go do stanu, w którym znajduje się teraz. Używam do tego getImageData i przechowuję dane w zmiennej. Następnie narysuję trochę więcej rzeczy na płótnie, a potem zmienię płótno na miejsce, w którym zapisałem jego stan, używając putImageData.

Jednak okazuje się, że putImageData działa bardzo wolno. W rzeczywistości, jest wolniejszy niż zwykłe przerysowywanie całego płótna od zera, co wiąże się z kilkoma rysunkami, które obejmują większość powierzchni, oraz ponad 40 000 operacji lineTo, po których następuje uderzenie i wypełnienie.

Ponowne rysowanie płótna o wymiarach 2000 x 5000 pikseli od zera trwa ~ 170 ms, a użycie metody putImageData zajmuje nawet 240 ms. Dlaczego putImageData jest tak powolny w porównaniu do przerysowywania płótna, chociaż ponowne rysowanie płótna wymaga wypełnienia niemal całego płótna drawImage, a następnie ponownego wypełnienia około 50% płótna wielobokami za pomocą lineTo, stroke i fill. Zasadniczo każdy piksel jest dotykany co najmniej raz podczas przerysowywania.

Ponieważ drawImage wydaje się być znacznie szybszy niż putImageData (w końcu część drawImage przerysowywania płótna zajmuje mniej niż 30 ms). Postanowiłem spróbować zapisać stan płótna bez użycia getImageData, ale zamiast tego użyć canvas.toDataURL, a następnie utworzyć obraz z adresu URL danych, który wstawiłbym do drawImage, aby narysować go na płótnie. Okazuje się, że ta cała procedura jest znacznie szybsza i zajmuje tylko około 35 ms.

Dlaczego więc putImageData jest o wiele wolniejszy niż alternatywy (używając getDataURL lub po prostu przerysowywania)? Jak mogę przyspieszyć dalszy rozwój? Czy istnieje i, jeśli w ogóle, jaki jest najlepszy sposób przechowywania stanu płótna?

(wszystkie liczby są mierzone za pomocą Firebug z poziomu Firefoksa)

Answer 1

tylko mały update na co najlepsze sposób to zrobić. Tak naprawdę napisałem pracę licencjacką na temat High Performance ECMAScript and HTML5 Canvas (pdf, german), więc do tej pory zebrałem trochę wiedzy na ten temat. Najlepszym rozwiązaniem jest użycie wielu elementów canvas. Rysowanie z jednego płótna na innym płótnie jest równie szybkie, jak rysowanie arbitralnego obrazu na płótnie.W ten sposób "przechowywanie" stanu płótna jest równie szybkie, jak przywrócenie go później, gdy użyjemy dwóch elementów canvas.

This jsPerf testcase bardzo wyraźnie pokazuje różne podejścia i ich zalety oraz wady.

Tylko dla kompletności, tutaj jak naprawdę powinien zrobić to:

// 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); 

Rozwiązanie to, w zależności od przeglądarki, do 5000X szybciej niż jednego uzyskiwanie przez upvotes.

Answer 2

Najpierw mówisz, że pomiar z Firebug. Właściwie to stwierdziłem, że Firebug znacznie spowalnia działanie JS, więc możesz nie uzyskać dobrych wyników.

Jeśli chodzi o putImageData, podejrzewam, że to dlatego, że funkcje pobierają dużą tablicę JS zawierającą wiele obiektów Number, z których wszystkie muszą być sprawdzone pod względem zakresu (0..255) i skopiowane do rodzimego bufora obszaru roboczego.

Być może po udostępnieniu typów WebGL ByteArray tego typu rzeczy można uczynić szybszymi.

Wydaje się dziwne, że dekodowanie i dekompresja danych base64 (z adresem URL danych PNG) jest szybsza, ale wywołuje tylko jedną funkcję JS z jednym ciągiem JS, dlatego używa głównie kodu natywnego i typów.

Answer 3

W Firefoksie 3.6.8 Udało mi się obejść powolność putImageData za pomocą metody toDataUrl/drawImage. Dla mnie to działa na tyle szybko, że mogę nazwać ciągu dotknięciem mouseMove wydarzenie:

Aby zapisać:

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

przywrócić:

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