如何从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;

转换后b64中编码的数据是正确的，正如我在http://codebeautify.org/base64-to-image-converter上尝试过的那样，并且确实显示了正确的图像。我一定想念一些愚蠢的东西。任何帮助都将是惊人的！

谢谢您的帮助！

Answer 1

那是你要的吗？

// Buffer for the jpg data
var buf = getImageResult.imagebuffer;
// Create an HTML img tag
var imageElem = document.createElement('img');
// Just use the toString() method from your buffer instance
// to get date as base64 type
imageElem.src = 'data:image/jpeg;base64,' + buf.toString('base64');

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

您需要添加img到 DOM。

此外，如果您在主进程中生成缓冲区，则需要将其传递给电子的渲染进程。