借助於socket.io從node.js發送圖像到html不起作用

Question

在堆棧溢出的不同鏈接的幫助下，我遇到了以下代碼。 感謝您的每個鏈接。 但是我無法在HTML頁面中顯示圖像。

這是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。

Answer 1

您檢查過info.buffer嗎？ 來得好嗎？ 您可以嘗試添加onload嗎？

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

借助於socket.io從node.js發送圖像到html不起作用

問題描述

1 個解決方案

解決方案1
0 2015-01-06 11:04:37

借助於socket.io從node.js發送圖像到html不起作用

問題描述

1 個解決方案

解決方案1 0 2015-01-06 11:04:37

解決方案1
0 2015-01-06 11:04:37