js如何解析websocket返回的二进制图片数据并且显示在div中

问题描述：

最好是有简单源代码急需要解决！！！！！！！！！
麻烦各位大神了！

答

 <img src="" id="img"/>
<script>
    ws = new WebSocket("ws://192.168.0.171:1235");
    ws.onopen = function () {
        alert("连接成功");
        ws.send('tom');
        alert("给服务端发送一个字符串：tom");
    }
    ws.onmessage = function (e) {
        document.getElementById('img').src = 'data:image/gif;'+e.data;
    }
</script>

不是说了src可以直接设置为base64，需要增加data:image/gif;前缀，如果是jpg图片需要改为data:image/jpg;......

答

2进制你直接设置img的src为你的ws地址就行了

要么就返回图片base64字符串，设置

 <img src="data:image/gif;base64字符串内容"/>

image/gif改为你的图片类型

答

http://download.csdn.net/detail/ghpan/7889015

答

大神可以再详细点不 ws = new WebSocket("ws://192.168.0.171:1235"); ws.onopen = function() { alert("连接成功"); ws.send('tom'); alert("给服务端发送一个字符串：tom"); } ws.onmessage = function(e){ alert(e.data); } 这是我的代码我弹出了 e.data 是一堆乱码（对方是用base64格式发过来的）我不知道怎么解析base64 并且显示在主页中麻烦大神了。

答

 <script>
    var arr = [];
    ws.onmessage = function (e) {
        arr.push(e.data); //压入数组
        if (arr.length == 1)//第一张图片，显示，后续的由计时器来控制
            document.getElementById('img').src = 'data:image/jpg;base64,' + arr[index];
    }
    var index = 0;//切换到的下标
    function chr() {
        if (arr.length < 2) return; //ws没有返回数据或者只返回一张时退出
        index++;
        if (index >= arr.length - 1) index = 0; //从头开始
        document.getElementById('img').src = 'data:image/jpg;base64,' + arr[index];
    }
    setInterval(chr, 1000);//1s切换一次，注意第二个参数是毫秒为单位
</script>

给个DEMO你。还有一个参考的：http://stackoverflow.com/questions/9292133/receiving-image-through-websocket

从ws中获取2进制数据流转换的

答

 var reader = new FileReader();

websocket.onmessage = function(evt){
if (evt.data instanceof Blob) {
reader.readAsText(evt.data,"UTF-8");
//reader.readAsText(evt.data,"gbk");
reader.onload = function(e){
var str=reader.result;
document.getElementById("myDiv").innerHTML=document.getElementById("myDiv").innerHTML+e.target.result;
}
}
};

当服务器发送二进制数据频率过快时，流浪器端会丢包（前面的数据接收不到，只接收到最后的数据）。如果服务器端每100ms发一次的话，浏览器就能够完整接收数据。为什么？

js如何解析websocket返回的二进制图片数据并且显示在div中

相关推荐