Uint8ClampedArray zu Imagedata Einstellung ist sehr langsam in Firefox

Question

ich den folgenden Code leite:

ImageData imagedata = context.getImageData(0, 0, width, height); 
Uint8ClampedArray pixelArray; 
... 

imagedata.data.set(pixelArray); 

Dieser Code schnell laufen in Chrome, aber sehr langsam in Firefox. Gibt es eine schnellere Möglichkeit, Uint8ClampedArray in ImageData zu schreiben?

Answer 1

Der schnellste Weg, ein Uint8ClampedArray in ein imageData zu schreiben, ist ein Uint8ClampedArray zu schreiben, das nicht zuerst von getImageData erhalten wurde. context.getImageData ist lächerlich langsam. Ich habe eine test on jsPerf gemacht, die zeigt, wo die Zeit in dem Code ist, den Sie gepostet haben. Der erste Test schreibt ein vorhandenes Array in ein imageData, während der zweite Test ein existierendes imageData liest. Der zweite Test dauert über 99% der Zeit.

Also, was können Sie dagegen tun?

Erstellen Sie Ihr Uint8ClampedArray nicht aus context.getImageData, sondern erstellen Sie es über new Uint8ClampedArray(width*height). Alternativ können Sie das Uint8ClampedArray zwischenspeichern, wenn Sie mehrmals in die imageData schreiben möchten, aber nur einmal davon lesen können, und es nicht von dem wiederherstellen, was imageData zurückgibt.

Ich habe vor ein paar Wochen selbst über dieses Problem gestolpert. Ich habe am Ende ein bisschen Programm neu geschrieben, um zu vermeiden, jemals aus dem Kontext zu lesen. Obwohl getImageData in Chrome viel schneller ist, hatte es dennoch einen kleinen Einfluss auf die Framerate des Browsers, wenn ich es in jedem Frame versuchte. Ich habe das Projekt auf dropbox, und das JS ist unauffällig, so dass Sie es nur überprüfen können, wenn Sie sehen wollen, was jemand anderes mit dem Problem getan hat.

Hoffe, dass hilft!