Javascript socket io、node js、从服务器向客户端发送图像/文件的简单示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26331787/
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
socket io, node js, Simple example to send image/files from server to client
提问by Bigs
Is there any plain and straight forward examples on how to serve an image? from server to client? through buffering or just a direct call to download? (the goal is to get image files in near real time efficiently to sort of present a near live stream of images) and append to a html image tag or just in the body of the html page.
有没有关于如何提供图像的简单明了的例子？从服务器到客户端？通过缓冲还是直接调用下载？（目标是有效地近乎实时地获取图像文件，以呈现近乎实时的图像流）并附加到 html 图像标记或仅在 html 页面的正文中。
incomplete sample code: (mostly acquired from official sample or just codes from stackoverflow)
不完整的示例代码：（主要来自官方示例或只是来自stackoverflow的代码）
index.js
索引.js
// basic variables
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs'); // required for file serving
http.listen(3000, function(){
console.log('listening on *:3000');
});
// location to index.html
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// only to test chat sample code from sample
io.on('connection', function(socket){
console.log('a user connected');
// broadcast a message
socket.broadcast.emit('chat message', 'System Broadcast Message: a user has been connected');
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
// trying to serve the image file from the server
io.on('connection', function(socket){
fs.readFile(__dirname + '/images/image.jpg', function(err, buf){
// it's possible to embed binary data
// within arbitrarily-complex objects
socket.emit('image', { image: true, buffer: buf });
console.log('image file is initialized');
});
});
(client side html page) index.html (we'll cut to the chase with only the portion which serves the image) What can we do on the client side to get the file and serve the image on the html page?
（客户端 html 页面） index.html （我们将只讨论提供图像的部分）我们可以在客户端做什么来获取文件并在 html 页面上提供图像？
socket.on("image", function(image, buffer) {
if(image)
{
console.log(" image: from client side");
// code to handle buffer like drawing with canvas** <--- is canvas drawing/library a requirement? is there an alternative? another quick and dirty solution?
console.log(image);
// what can we do here to serve the image onto an img tag?
}
});
thank you for reading
谢谢你的阅读
Update:
更新：
after the code snippets from below it also needed to change "buffer" variable to image.buffer in order for the image to display correctly
在下面的代码片段之后，它还需要将“buffer”变量更改为 image.buffer 以便图像正确显示
basically change the line from
基本上改变线
img.src = 'data:image/jpeg;base64,' + buffer;
To
到
img.src = 'data:image/jpeg;base64,' + image.buffer;
回答by mscdex
One possible solution is to base64-encode the image data and use that in the browser via image.src:
一种可能的解决方案是对图像数据进行 base64 编码并通过image.src以下方式在浏览器中使用它：
On the server side, try changing this:
在服务器端，尝试改变这个：
socket.emit('image', { image: true, buffer: buf });
to this:
对此：
socket.emit('image', { image: true, buffer: buf.toString('base64') });
Then on the client side:
然后在客户端：
var ctx = document.getElementById('canvas').getContext('2d');
// ...
socket.on("image", function(info) {
if (info.image) {
var img = new Image();
img.src = 'data:image/jpeg;base64,' + info.buffer;
ctx.drawImage(img, 0, 0);
}
});
