如何顯示來自Node.js緩衝區（UInt8Array）的JPG圖像

Question

我有一個自定義的Node.JS插件，它將jpg捕獲傳輸到我的應用程序，這很好用 - 如果我將緩衝區內容寫入磁盤，它是一個正如預期的那樣，正確的jpg圖像。

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

我掙扎，顯示圖像作爲img.src而不是把它保存到磁盤，像

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

在轉換後b64encoded的數據是正確的，我試了一下http://codebeautify.org/base64-to-image-converter，並顯示正確的圖像。我一定會錯過一些愚蠢的東西。任何幫助將是驚人的！

感謝您的幫助！

Answer 1

您需要將img添加到DOM。

另外，如果您在主進程中生成緩衝區，則需要將它傳遞給電子渲染進程。

Answer 2

捂臉 ...有沒有在文字額外的前導空格...

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; 

完美的作品。

Answer 3

這就是你想要的嗎？

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