How to recognise the arraybuffer is string or image?

Question

We are using websocket to transfer the data in bytearray. On the receiving end, the javascript has to determine whether the ArrayBuffer received is of type String or Image. If it is String then convert to String otherwise convert to Blob. Something as below, except i don't know how to recognize the arraybuffer is string or image.

if (message instanceof ArrayBuffer) {
         if(message of type string)
         var bytearray = new Uint8Array(message);
         to convert to string
        var out = String.fromCharCode.apply(null, bytearray);
        console.log(out);
     }
       if(message of type image){
        imageId.height = 400;
        imageId.width = 600;
        imageId.src = convertArrayBufferBlobUrl(message);
      }

Update:

From the server i will send the image as folloing java code. How can i append or prepend flag in the byte array to identify as image or string by the client browser(javascript)?

ImageIO.write(getSubImage(bufferedImage,width,height), "png", baos ); byte[] result=baos.toByteArray();

you need to send meta like filename, mime type, etc along with the data. — dandavis, Sep 15 '14 at 05:59
even without sending a mime type you can use the magic/signature for the image type http://en.wikipedia.org/wiki/List_of_file_signatures — technosaurus, Sep 27 '14 at 01:41
Websocket uses typically HTTP as underlying a transport layer. So one can set HTTP headers additionally to HTTP body with the main message. In the way the server can set `Content-Type`, cookie or your own custom header. Typically `Content-Type` (with the value like `image/png` or `text/plain`) is enough, if it's not, then custom headers can solve all problems. The exact API which you need to use on the server and on the client depends mostly from the libraries which you use. — Oleg, Sep 27 '14 at 11:31
@Oleg: no, websockets uses it's own TCP-based protocol, http just connects the devices. headers, cookies and other http concepts won't help. there are also no websocket.getResponseHeader()-type methods even if you did alter the initial http handshake — dandavis, Oct 02 '14 at 21:55
if you are expecting text, you can just look for non-text binary values in the array. or just load the image in a tag and default to the text routine onerror — dandavis, Oct 02 '14 at 21:58
you could prepend a fixed amount of binaries in the beginning of the arraybuffer and use that like metadata. then you would have to splice the arraybuffer — Endless, Oct 03 '14 at 18:46

score 2 · Answer 1 · edited May 23 '17 at 12:29

There are two ways. For example, if you are using a JPEG file type you can identify a JPEG format by it general characteristics:

http://www.fileformat.info/format/jpeg/corion.htm

How to identify contents of a byte[] is a jpeg?

Now, this is an effective method, but you have to program one for each image type and that is tedious.

Now this: How to check if a byte array is a valid image? can also be used and is another valid answer, but suffers from overhead of converting data to an image.

A good option as @dandavis suggested is to use some metadata like a flag from the server side.

Eg:

if(<data is image>)
     result=json_encode(array[flag,data])

And send result back to the Client. The flag might say 'yes' for image and 'no' for string, or 1 and 0 or any pair you find appealing.

Update Check this out

import net.sf.json.JSONArray;

ImageIO.write(getSubImage(bufferedImage,width,height), "png", baos );
byte[] result=baos.toByteArray();

JSONObject obj = new JSONObject();

obj.put("imgFlag","true");
obj.put("imgData", result);

However, it might not be easy to put the byte array itself. My suggestion is try putting the byte array as json value, but if it doesn't work, convert your byte array result to a base64 string first as shown here: Put byte array to JSON and vice versa

...and do the same.

You can send data by converting obj to a JSON string.

String jsonData=obj.toString();

And send jsonData as the response data.

i need to add flag at server side using java code. i have updated the question. — user1595858, Sep 26 '14 at 22:55
Updated my answer, however, I do not have a means to verify it right now though. — Mkl Rjv, Sep 29 '14 at 06:40
Or check @technosaurus's comment for your question which is basically the same as the general characteristics of the file you are using as mentioned in my answer. This is an ok soution if you are using limited type of files, as in the question you use png. — Mkl Rjv, Sep 29 '14 at 06:45

How to recognise the arraybuffer is string or image?

1 Answers1