javascript 将图像从缓冲区 (nodejs/socket.io) 绘制到 html 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6208234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript draw image into html from buffer (nodejs/socket.io)
提问by matiasfh
(sorry for my english) Hi, i have an appplication created with nodejs to push image data into a webpage.
（抱歉我的英语）嗨，我有一个用 nodejs 创建的应用程序，用于将图像数据推送到网页中。
the data from nodejs server is pushed into webpage using socket.io
使用 socket.io 将来自 nodejs 服务器的数据推送到网页中
This data is the complete image, i try to write to disc to see the image and is good. The data is put into a buffer to encode in base64 then send to the webpage and i try to show using 'data:image/png;base64,'+data but nothing happend... The data seems to be "complete" including the headers of the PNG image.
这些数据是完整的图像，我尝试写入光盘以查看图像并且很好。数据被放入缓冲区以 base64 编码，然后发送到网页，我尝试使用 'data:image/png;base64,'+data 显示但什么也没发生......数据似乎是“完整的”，包括PNG 图像的标题。
The server use thrift to communicate with another client (this in C++), this client create the images and send to the nodejs-thrift server, when a image is receive, the nodejs-socket.io server push into webpage.
服务器使用 thrift 与另一个客户端（在 C++ 中）通信，该客户端创建图像并发送给 nodejs-thrift 服务器，当接收到图像时，nodejs-socket.io 服务器推送到网页。
some code: serverside
一些代码：服务器端
var http = require('http'),
url = require('url'),
fs = require('fs'),
sys = require('sys');
var hserver = http.createServer(function(request,response){
var path = url.parse(request.url).pathname;
switch(path){
case '/':
fs.readFile(__dirname + '/index.html',function(err,data){
if(err) return send404(res);
response.writeHead(200,{'Content-Type':'text/html'});
response.write(data,'utf8');
response.end();
});
break;
default: send404(response);
}
}),
send404 = function(res){
res.writeHead(404);
res.write('404');
res.end();
};
hserver.listen(8080);
var io = require('socket.io');
var socket = io.listen(hserver);
//this is the function in the Thrift part to send the image data to webpage using socket.io
var receiveImage = function(image,success){
buff= new Buffer(image.data.toString('base64'),'base64');
socket.broadcast({
data: buff.toString('base64'),
width: image.width,
height: image.height
});
success(true);
}
In the webpage i try to load the image using the on.message callback of socket.io
在网页中，我尝试使用 socket.io 的 on.message 回调加载图像
<script>
var socket = new io.Socket(null,{port:8080});
socket.connect();
socket.on('message',function(obj){
document.getElementById('imagenes').src='data:image/png;base64,'+obj.data.toString();
});
socket.on('connect',function(){
document.getElementById('stream').innerHTML = "Conectado!"
});
</script>
But i can't see the image.. The obj.data.toString('base64') create a string like this:
但我看不到图像.. obj.data.toString('base64') 创建一个这样的字符串：
PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq ............
.............
/NIlWDHUDmIPdHIEND
is the all data of the image..
是图像的所有数据..
how can i show the image?? (maybe using img tag or into canvas)
我怎样才能显示图像？（也许使用 img 标签或进入画布）
Thanks in advance.
提前致谢。
EDIT: Some changes to code, but nothing change.. my guess.. the image don't show because the data (PNGIHDRKIDATxYw......PdHIENDB) isn't the correct data.. i search about this and the png data used to show images inline is diferent (without the header PNGIHDRKIDAT and the tail ENDB), i remove the header and tail and don't show .. maybe the data i receive isn't correct, but if i try to write to filesystem in the server side using nodejs (fs) i get the correct images (with fs.writeFileSync("imagen.png",image.data.toString('binary'),'binary') ) using binary encode, but with base64 encode theres no image.
编辑：对代码进行了一些更改，但没有任何变化..我的猜测..图像没有显示，因为数据 (PNGIHDRKIDATxYw......PdHIENDB) 不是正确的数据..我搜索了这个和 png用于内联显示图像的数据是不同的（没有标题 PNGIHDRKIDAT 和尾部 ENDB），我删除了标题和尾部并且不显示 .. 也许我收到的数据不正确，但如果我尝试写入文件系统在服务器端使用 nodejs (fs) 我得到正确的图像（使用 fs.writeFileSync("imagen.png",image.data.toString('binary'),'binary') ）使用二进制编码，但使用 base64 编码没有图像。
采纳答案by matiasfh
In the C++ side (where i create the images and send them to the nodejs server). I need to encode the data in base64. Then in node i get this data put into a buffer with base64 encoding and send it to the webpage.
在 C++ 端（在那里我创建图像并将它们发送到 nodejs 服务器）。我需要在 base64 中对数据进行编码。然后在节点中，我将这些数据放入带有 base64 编码的缓冲区中并将其发送到网页。
回答by Stoive
Your client side code looks fine (except for the fact that .toString('base64')doesn't do anything to a Stringobject whilst in-browser, only to Bufferobjects in node), I'm making a guess that the problem is in receiveImage, which should be:
您的客户端代码看起来不错（除了在浏览器.toString('base64')中不对String对象执行任何操作，仅对Buffer节点中的对象执行任何操作），我猜测问题出在receiveImage，应该是：
var receiveImage = function(image,success) {
socket.broadcast({
data: image.data.toString('base64'),
width: image.width,
height:image.height
});
success(true);
}
回答by jcolebrand
It has been my experience that a base64 string of an image should be loaded with a data url like so:
根据我的经验，图像的 base64 字符串应加载数据 url，如下所示：
<img alt="some image" src="data(PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq .........)" />
