首页 > 代码库 > js中从blob提取二进制

js中从blob提取二进制

2024-07-17 00:17:31   221人阅读

文章结构：

一、所遇到的问题

二、解决方法

 

一、

    服务器端通过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;                }                            }        }

 


联系
我们