Socket.io从1.0开始支持二进制流,有没有专门针对图像的完整例子 [英] Socket.io began to support binary stream from 1.0, is there a complete example especially for image
本文介绍了Socket.io从1.0开始支持二进制流,有没有专门针对图像的完整例子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 node.js 和 socket.io 的初学者.Socket.io从1.0开始支持二进制流,有没有完整的例子,特别是图片推送到客户端,在canvas上显示?谢谢
I'm a beginner on node.js and socket.io. Socket.io began to support binary stream from 1.0, is there a complete example especially for image push to client and show in canvas? thanks
推荐答案
解决方案有点复杂,但应该适用于 Chrome、Firefox 和 IE10+(不确定 Opera 和 Safari):
The solution is a bit complicated but should work in Chrome, Firefox, and IE10+ (not sure about Opera and Safari):
服务器端某处:
io.on('connection', function(socket){
fs.readFile('/path/to/image.png', function(err, buffer){
socket.emit('image', { buffer: buffer });
});
});
以下是您在客户端上处理它的方式:
socket.on('image', function(data) {
var uint8Arr = new Uint8Array(data.buffer);
var binary = '';
for (var i = 0; i < uint8Arr.length; i++) {
binary += String.fromCharCode(uint8Arr[i]);
}
var base64String = window.btoa(binary);
var img = new Image();
img.onload = function() {
var canvas = document.getElementById('yourCanvasId');
var ctx = canvas.getContext('2d');
var x = 0, y = 0;
ctx.drawImage(this, x, y);
}
img.src = 'data:image/png;base64,' + base64String;
});
只需将 yourCanvasId
替换为您的画布 ID :)
Just replace yourCanvasId
with your canvas id :)
这篇关于Socket.io从1.0开始支持二进制流,有没有专门针对图像的完整例子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文