Wie man ein JPG Bild von einem Node.js Puffer (UInt8Array) anzeigt

Question

Ich habe ein kundenspezifisches Node.JS Addon, das eine jpg Aufnahme zu meiner Anwendung überträgt, die groß funktioniert - wenn ich den Pufferinhalt auf Platte schreibe, ist es a richtiges JPG-Bild, wie erwartet.

var wstream = fs.createWriteStream(filename); 
wstream.write(getImageResult.imagebuffer); 
wstream.end(); 

Ich bin zu kämpfen, das Bild als img.src anzuzeigen, anstatt sie auf der Festplatte zu speichern, so etwas wie

var image = document.createElement('img'); 
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer)); 
image.src = 'data:image/jpeg;base64,' + b64encoded; 

Die Daten in b64encoded nach der Konvertierung korrekt ist, wie ich es versuchte, auf http://codebeautify.org/base64-to-image-converter und das richtige Bild zeigt sich. Ich muss etwas dummes vermissen. Jede Hilfe wäre fantastisch!

Danke für die Hilfe!

Answer 1

Sie müssen img dem DOM hinzufügen.

Auch wenn Sie den Puffer im Hauptprozess erzeugen, müssen Sie es auf dem Render-Prozess von Elektronen übergeben.

Answer 2

facepalm ... Es gibt einen extra führenden Platz im Text ...

var getImageResult = addon.getlatestimage(); 
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer)); 
var datajpg = "data:image/jpg;base64," + b64encoded; 
document.getElementById("myimage").src = datajpg; 

perfekt funktioniert.

Answer 3

Wollen Sie das?

// buffer for the jpg data 
var buf = getImageResult.imagebuffer 
// create a element 
var el = document.createElemrnt('img') 
// just use toString methode from your buffer instance 
// to get date as base64 type 
image.src = 'data:image/jpeg;base64,' + buf.toString('base64')