tangjunzuishuai
tj_2525love
采纳率28.6%
2015-04-09 09:56

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

已采纳

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • showbo GoCityPass新加坡曼谷通票 6年前
     <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;......

    点赞 3 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 6年前
     <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进制数据流转换的

    点赞 1 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 6年前
    点赞 1 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 6年前

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

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

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

    image/gif改为你的图片类型

    点赞 1 评论 复制链接分享
  • tangjunzuishuai tj_2525love 6年前

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

    点赞 评论 复制链接分享
  • u014747970 飘零L 5年前
     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发一次的话,浏览器就能够完整接收数据。为什么?

    点赞 评论 复制链接分享

相关推荐