I write something that occupies the canvas (with a color depth of 1 bit pixel), converts it to Uint8Array (with one byte representing 8 pixels), then sends it when I receive other similarly encoded messages.
I realized that blobs are well suited for such data, and I create a blob, create a FormData, attach a blob to FormData, and then send it like this:
function sendFormData(data){ //data.data is a Uint8Array other attributes are strings var bytesBlob = new Blob([data.data],{type: "application/octet-stream"}); console.log(bytesBlob,data.data); var form = new FormData(); var request = new XMLHttpRequest(); form.append("blob",bytesBlob,"message"); form.append("user",data.user); form.append("colour",data.colour); form.append("room",currentRoom); request.open("POST","http://localhost:8080/",true); request.send(form); }
Now, using console.log after creating the blob, I can see the blob length, which should be 2035 and is in Chrome, but in other web browser browsers (Safari) the size is 19.
This is because instead of making a blob from Uint8Array, it makes a blob from the words "[Uint8Array object]", which is obviously not useful to anyone.
I see this when I download one of the blobs from the server:
$ cat blob-1 [object Uint8Array]
I assume this is the result of a Uint8Array object receiving toString () 'd at some point, so how can I ensure it is sent as actual binary data?
I am wondering if I will do it correctly using blobs or what will be the best method to send data? Moreover, the target platform seems to throw an exception and stops rather than bloberising "[Uint8Array object]"
The target platform is Webkit, so I don’t have to worry about other types of browsers. Thanks.