socket io, node js，从服务器到客户端发送图像/文件的简单示例

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 *)

不完整的样本代码:(主要从官方样本获取，或仅从*获取代码)

index.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页面)索引。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。缓冲以使图像正确显示

basically change the line from

基本上把线从

img.src = 'data:image/jpeg;base64,' + buffer;

来

img.src = 'data:image/jpeg;base64,' + image.buffer;

1 个解决方案

#1

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);
  }
});

#1