ibt es einfache und direkte Beispiele für die Bereitstellung eines Bildes? vom Server zum Client? durch puffern oder nur einen direkten aufruf zum herunterladen? (das Ziel ist es, Bilddateien in nahezu Echtzeit effizient zu erstellen, um einen nahezu Live-Stream von Bildern zu präsentieren) und an ein HTML-Bild-Tag oder einfach an den Hauptteil der HTML-Seite anzuhängen.

unvollständiger Beispielcode: (meistens aus einer offiziellen Probe oder nur Codes von 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');
  });
});

(clientseitige HTML-Seite) index.html (wir kommen nur mit dem Teil auf den Punkt, der das Bild enthält) Was können wir auf der Clientseite tun, um die Datei abzurufen und das Bild auf der HTML-Seite bereitzustellen?

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

 });

Danke fürs Lesen

Aktualisieren

Nach den Codeausschnitten von unten musste auch die Variable "buffer" in image.buffer geändert werden, damit das Bild korrekt angezeigt wird

ndern Sie im Grunde die Zeile von

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

Z

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