2016-07-22 16 views
2

Ich versuche eine Demo zu erstellen, die ein node.js C++ Plugin ist. In node.js erhalte ich eine Bitmap, die im ARGB-Format ist, und ich muss diese an html5 canvas übergeben. Ich versuche den effizientesten Weg zu finden, weil es schmerzhaft langsam ist.Wie übertragen Sie Bilddaten von node.js zu HTML5 Canvas?

Zur Zeit mache ich folgendes:

--- in node.js --- 
- Convert ARGB to RGBA (because ImageData accepts that format) 
- Create v8::ArrayBuffer (wrapper over the underlying buffer) 
- Create v8::Uint8ClampedArray (wrapper over the array buffer) 
- Return an object which has the Uint8ClampedArray, width and height 

--- in the browser --- 
- Get the result from my function 
- Create ImageData instance with the specified width and height 
- Loop over all bytes in the Uint8ClampedArray and copy them to the image data 
- context.putImageData(image_data, 0, 0); 

Ich bin mir ziemlich sicher, dass es muss mehr optimal sein, dies zu tun. Es ist kein Problem, den Puffer im Add-In irgendwie am Leben zu erhalten, aber ich möchte zumindest die Byte-für-Byte-Kopie des Puffers für die Bilddaten vermeiden.

Ich bin mir auch nicht sicher warum, wenn ich versuche, den ImageData-Konstruktor zu verwenden, der Uint8ClampedArray als ersten Parameter in die Luft jagt. In solch einem Fall bekomme ich gerade: v8 :: Object :: GetAlignedPointerFromInternalField(). Fehler: Nicht ein Smi

Dank

Antwort

0

können Sie resterize js verwenden, um Daten in Leinwand zu binden. Ich benutzte das, es funktioniert schnell sogar für große Bilder.