使用 Node.js 和 socket.io 和 fs 动态显示图像
Dynamically display an image using Node.js with socket.io and fs
>作为我最后一年项目的一部分,我在英特尔伽利略第 2 代上运行 Node.js,我正在尝试使用伽利略使用网络摄像头拍照,并使用画布元素将每次拍摄的照片提供给网页。
这是 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);
});
伽利略上运行的草图将字符串"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){
所以我看不出问题是什么
我发现问题是客户端正在接收图像,但我在尝试显示它之前没有等待它加载。我在客户端更改了我的代码以等待图像加载,然后显示图像并且它起作用了。下面是现在客户端的代码:
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");
}
});
相关文章:
- 动态显示JSON文件内容
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- Highcharts:根据表单输入动态显示数据
- ImageMapster可以动态显示和隐藏图像选择崩溃
- AngularJS动态显示多条记录
- 动态显示/添加具有不同字段的相同表单到页面
- 在轨道上的 Ruby 文本字段中动态显示数据
- 使用 Node.js 和 socket.io 和 fs 动态显示图像
- 在两列中动态显示产品
- 根据条件使用ng repeat动态显示输入复选框
- 动态显示元素上的JavaScript触摸端;不要开火
- Bootstrap动态显示PopOver
- 从本地存储中删除动态显示在
- 中的项目
- 单击时动态显示数据库信息
- 动态显示实时高图表数据,无需警报
- 隐藏信息窗口标记并动态显示
- 尝试使用 Angular 动态显示模型
- 在 javascript 中动态显示一个带有换行符的警告框
- PHP、MySQL 和 Ajax:动态显示默认数据、选择现有数据或添加新数据
- 动态显示和隐藏元素