js中从blob提取二进制
文章结构:
一、所遇到的问题
二、解决方法
一、
服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二进制数组和一个字节的图片标识拼接在一块传输给浏览器端,最后在浏览器端拆分。找了好久才找到一些js处理二进制的相关方法,就在此记录一下。
二、
1、服务器端二进制拼接:
public byte[] mergeByte(byte[] b1,byte[] b2) { byte[] b3=new byte[b1.length+b2.length]; System.arraycopy(b1,0,b3,0,b1.length); System.arraycopy(b2,0,b3,b1.length,b2.length); return b3; }
2、浏览器端二进制拆分
主要利用js中的Blob和FileReader,有关这两个类的知识,可以查看
http://www.iunbug.com/archives/2012/06/06/273.html
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
ws.onmessage = function(event){ if (event.data instanceof Blob) { var blob = event.data; //先把blob进行拆分,第一个字节是标识 var newblob=blob.slice(0,1);
//js中的blob没有没有直接读出其数据的方法,通过FileReader来读取相关数据 var reader = new FileReader(); reader.readAsBinaryString(newblob); var imgFlag;
// 当读取操作成功完成时调用. reader.onload = function(evt){ if(evt.target.readyState == FileReader.DONE){ var imgFlag = evt.target.result; if(imgFlag==‘@‘){ img=document.getElementById(‘er‘); }else if(imgFlag==‘A‘){ img=document.getElementById(‘photo‘); }else{ img=document.getElementById(‘photo‘); } newblob=blob.slice(1,blob.size); window.URL = window.URL || window.webkitURL; var source = window.URL.createObjectURL(newblob); img.src=source; } } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。