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

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

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;......

u014230557
大半厥子 大婶,请拿走我的膝盖。
接近 4 年之前 回复
tangjunzuishuai
tj_2525love 大神 你就是我的救星 啊 可以加你qq什么的吗 好崇拜你 可以向你学习
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 看DEMO,已经发了。。在另外一个回复里面。。
5 年多之前 回复
tangjunzuishuai
tj_2525love onmessage的时候用数组保存转换后的base64字符串。然后计时器动态从数组中进行轮换。大神这个我不会 你可以帮我写一段吗 是在不好意思 求学之路很长 向你们学习
5 年多之前 回复
tangjunzuishuai
tj_2525love 但是问题来了 就算在onmessage里面更新img的src 但是如果我不刷新网页 网页上的图片就不会刷新下一张图片对吧 虽然内部的地址变了但是 对与网页来说其实什么都没做
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: onmessage的时候用数组保存转换后的base64字符串。然后计时器动态从数组中进行轮换。
5 年多之前 回复
tangjunzuishuai
tj_2525love 大神可能我的表述有点问题 服务器那边用for循环发了两张图片 在网页上应该看到两张图片不停的变化才对 但是我只看到 两张图片轮流出现了一次 就停在了第1张图片 不动了 并没有实现实时 更新 我猜想是不是 只有在网页刷新的一瞬间 执行了for循环 ?
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 在onmessage里面更新img的src就好了。。记得采纳。。嘿嘿
5 年多之前 回复
tangjunzuishuai
tj_2525love 还有一个问题是 如果对方发给我的事二进制 我的e.data里面是没有东西的 但是他给我发字符串 e.data就可以检测到里面有东西 如果里面检测不到二进制数据 那就没法转换为base64了
5 年多之前 回复
tangjunzuishuai
tj_2525love 回复showbo: 大神 如果我想实现 服务器发送过来的图片在网页上实时更新呢 也就是形成一个简单的视频 (不刷新网页的情况下)
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 2进制可以调用btoa方法转为base64字符串.img.src = "data:image/png;base64," + window.btoa(str);
5 年多之前 回复
tangjunzuishuai
tj_2525love 大神我解决了 太感谢你了 原来是'data:image/gif ?;'+e.data; 问号处少了base64,这个关键词 太感谢你了 不过大神 我们这里有个问题就是 他们想让我直接解二进制格式的数据流 但是每次服务器以二进制发过来 我用if(e.data) {alert(abc)} 无法实现弹窗 但是他发字符串过来就可以 不知道为什么
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 应该是data:image/gif;base64,前缀。。。少打了”base,“
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: sorry,sorry。。。关键字给给少了。。document.getElementById('img').src = 'data:image/gif;base64,'+e.data;
5 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 你确认是图片的base64编码,base64是字符串,不是2进制。。base64应该是累世R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==这种的字符串。
5 年多之前 回复
tangjunzuishuai
tj_2525love 大神我按照你的代码写了一遍 但是浏览器显示的一个小图像(就是XX那种 也就是没显示出来) 图片格式我也改成服务器端发过来的jpeg格式 汗 已经整了好几天了 快绝望了
5 年多之前 回复

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

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

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

image/gif改为你的图片类型

tangjunzuishuai
tj_2525love 大神可以再详细点不 <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 并且显示在主页中 麻烦大神了
5 年多之前 回复
weixin_42970847
一位十分低俗Giser 回复tj_2525love: 在吗,请问解决了吗
一年多之前 回复
tangjunzuishuai
tj_2525love 亲 我是需要用javascript解析 不是用java解析啊
5 年多之前 回复
tangjunzuishuai
tj_2525love 大神可以再详细点不 <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 并且显示在主页中 麻烦大神了。
5 年多之前 回复
 <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进制数据流转换的

showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tangjunzuishuai: 和多少张行没关系,没限制数量
5 年多之前 回复
tangjunzuishuai
tj_2525love 大神 服务器发过来的图片不止两张 好像就无法实现了
5 年多之前 回复

大神可以再详细点不 <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>

 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发一次的话,浏览器就能够完整接收数据。为什么?

立即提问
相关内容推荐