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

        }