使用带有 socket.io 和 fs 的 Node.js 动态显示图像答案

【问题标题】：Dynamically display an image using Node.js with socket.io and fs使用带有 socket.io 和 fs 的 Node.js 动态显示图像
【发布时间】：2016-04-21 18:10:29
【问题描述】：

作为我最后一年项目的一部分，我正在英特尔 Galileo Gen 2 上运行 Node.js，我正在尝试使用 Galileo 使用网络摄像头拍照，并使用画布元素。

这是 Node.js 服务器上的代码：

    // this 'message' event receives the sketch datagram 
server.on("message", function (msg, rinfo) { 
    udp_msg = msg.toString();     
    if(udp_msg == "picTaken") {
                    fs.readFile(__dirname + '/pictures/pic'+picNum+'.jpg', function(err, buf){

                    io.emit('image', { image: true, buffer:         buf.toString('base64') });
                    console.log('image file is initialized' + picNum);
                    picNum++;
                });
    }
    //console.log("from " + rinfo.address + " message:" + udp_msg);     
    // just bypassing the message sent by the sketch     
    io.emit("server-event-info", udp_msg);
});

在 galileo 上运行的草图将字符串“picTaken”发送到服务器，从而调用该函数这是html页面上显示图像的代码：

<div class="pic">
        <canvas id="img"  width="280" height="220" style="border:1px solid #000000;">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </div> 
    <script>
        var ctx = document.getElementById('img').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);
            console.log("Image received");
          }
        });
    </script>

问题是图像似乎已被浏览器接收，因为它正在将“收到的图像”打印到控制台，但没有显示。如果我尝试静态显示图像，例如通过替换行

  fs.readFile(__dirname + '/pictures/pic'+picNum+'.jpg', function(err, buf){

与

fs.readFile(__dirname + '/pictures/pic1.jpg', function(err, buf){

所以我看不出问题出在哪里

【问题讨论】：

标签： javascript node.js sockets intel intel-galileo

【解决方案1】：

我发现问题在于图像正在被客户端接收，但我没有等待它加载，然后才尝试显示它。我在客户端更改了我的代码以等待图像加载然后显示图像并且它起作用了。现在是客户端的代码：

var ctx = document.getElementById('img').getContext('2d');
    socket.on("image", function(info) {
      if (info.image) {
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
        };
        img.src = 'data:image/jpg;base64,' + info.buffer;   
        console.log("Image received");
      }
    });

【讨论】：