js中從blob提取二進制

文章結構：

1、所遇到的問題

2、解決方法

 

1、

    服務器端經過websocket向瀏覽器端傳輸圖片（二進制），須要根據不一樣的圖片把圖片顯示在不一樣的位置，可行的一個方法是先把圖片轉化成二進制數組，再把二進制數組和一個字節的圖片標識拼接在一塊傳輸給瀏覽器端，最後在瀏覽器端拆分。找了很久才找到一些js處理二進制的相關方法，就在此記錄一下。

2、

    一、服務器端二進制拼接：

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

   二、瀏覽器端二進制拆分

主要利用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;
                }
                
            }

        }