标签：style blog http color io 数据 ar 问题
文章结构：
一、所遇到的问题
二、解决方法
一、
服务器端通过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; } } }
标签：style blog http color io 数据 ar 问题
原文地址：http://www.cnblogs.com/redlight/p/3905326.html
