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

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