socket io、node js、从服务器向客户端发送图像/文件的简单示例 [英] socket io, node js, Simple example to send image/files from server to client

问题描述

是否有任何关于如何提供图像的简单明了的示例?从服务器到客户端?通过缓冲还是直接调用下载?(目标是有效地近乎实时地获取图像文件，以呈现近乎实时的图像流)并附加到 html 图像标记或仅附加到 html 页面的正文中.

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.

不完整的示例代码:(大部分来自官方示例或只是来自stackoverflow的代码)

incomplete sample code: (mostly acquired from official sample or just codes from stackoverflow)

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

(客户端 html 页面) index.html (我们将切入正题，只讨论提供图像的部分)我们可以在客户端做什么来获取文件并在 html 页面上提供图像?

(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?

  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?
     }

 });

感谢阅读

在下面的代码片段之后它还需要将buffer"变量更改为 image.buffer 以使图像正确显示

after the code snippets from below it also needed to change "buffer" variable to image.buffer in order for the image to display correctly

基本上改变了

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

到

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

推荐答案

一种可能的解决方案是对图像数据进行 base64 编码并通过 image.src 在浏览器中使用它:

One possible solution is to base64-encode the image data and use that in the browser via image.src:

在服务器端，尝试改变这个:

On the server side, try changing this:

socket.emit('image', { image: true, buffer: buf });

为此:

socket.emit('image', { image: true, buffer: buf.toString('base64') });

然后在客户端:

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

这篇关于socket io、node js、从服务器向客户端发送图像/文件的简单示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！