Extracting binary from blob in JS

Article structure:

First, the problems encountered

Second, the solution

One

Server side through the WebSocket to the browser side of the picture (binary), you need to display the picture in different locations according to different pictures, a feasible way is to first convert the picture into a binary array, and then the binary array and a byte of the picture to be stitched together in a piece to the browser side, Finally split on the browser side. Looking for a long time to find some JS processing binary related methods, here to record a bit.

Two

1, server-side binary splicing:

 Public byte [] Mergebyte (byte[] b1,byte[] b2) {                byte[] b3=newbyte[ b1.length+B2.length];                System.arraycopy (B1,0,b3,0, b1.length);                System.arraycopy (B2,0, b3,b1.length,b2.length);                 return b3;            }

2, browser-side binary split

The main use of JS in the Blob and FileReader, about these two classes of knowledge, you can view

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.datainstanceofBlob) {            varBlob =Event.data; The Blob is split first, the first byte is the identityvarNewblob=blob.slice (0,1);
The blob in JS does not have a method to read its data directly, and FileReader to read the relevant datavarReader =NewFileReader ();            Reader.readasbinarystring (NEWBLOB); varImgflag;
Called when the read operation completes successfully. Reader.onload=function(evt) {if(Evt.target.readyState = =Filereader.done) {                  varImgflag =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; varSource =window.                Url.createobjecturl (NEWBLOB); IMG.SRC=source; }                            }        }