從socket.io到html的幫助下從node.js發出圖像不起作用

在堆棧溢出的不同鏈接的幫助下，我遇到了下面的代碼。感謝每一個環節。但我無法在HTML頁面中顯示圖像。從socket.io到html的幫助下從node.js發出圖像不起作用

這裏是Node.js的代碼：

socketio.listen(server).on('connection', function (socket) { 
    socket.on('message', function (msg) { 
     console.log('Message Received: ', msg); 
     socket.broadcast.emit('message', msg); 
     fs.readFile(__dirname + '/Test.jpeg', function(err, buf) { 
      socket.emit ('image', { image: true, buffer: buf.toString('base64') }); 
     }); // file reading. 
    }); 
});

我把Test.jpeg當上述文件所在的文件夾中。

HTML文件是：

<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <body> 
    <canvas id="myCanvas" width="280" height="220" style="border:1px solid #000000;"> 
    </canvas> 

    Incoming Chat: <ul id="incomingChatMessages"></ul> 

    <input type="text" id="outgoingChatMessage"> 
    </body> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
     var ctx = document.getElementById('myCanvas').getContext('2d'); 
     $(function(){ 
      var iosocket = io.connect(); 

      iosocket.on('connect', function() { 
       $('#incomingChatMessages').append($('<li>Connected</li>')); 

       iosocket.on('message', function(message) { 
        $('#incomingChatMessages').append($('<li></li>').text(message)); 
       }); 

       iosocket.on('disconnect', function() { 
        $('#incomingChatMessages').append('<li>Disconnected</li>'); 
       }); 

       iosocket.on('image', function(info) { 
       $('#incomingChatMessages').append($('<li>image event..</li>')); 

        if (info.image) { 
         var img = new Image(); 
         img.src = 'data:image/jpeg;base64,' + info.buffer; 
         ctx.drawImage(img, 0, 0); 
         } 
        }); // image 
      }); 


      $('#outgoingChatMessage').keypress(function(event) { 
       if(event.which == 13) { 
        event.preventDefault(); 
        iosocket.send($('#outgoingChatMessage').val()); 
        $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val())); 
        $('#outgoingChatMessage').val(''); 
       } 
      }); 
     }); 
    </script> 
    </head> 
</html>

注：另外，test.jpg放在爲1280 * 720的大小。

來源

2015-01-06 DrunkenMaster

你檢查了info.buffer嗎？它是否正常？你可以嘗試添加onload。

var image = new Image(); 
image.src = "data:image/jpeg;base64,"+info.buffer; 
image.onload = function() { 
    ctx.drawImage(image, 0, 0); 
};

來源

2015-01-06 11:04:37 ssug89

從socket.io到html的幫助下從node.js發出圖像不起作用

回答

相關問題