Converting bytes to an image for drawing on a HTML5 canvas

Question

Anyone know how I would convert bytes which are sent via a websocket (from a C# app) to an image? I then want to draw the image on a canvas. I can see two ways of doing this:

Somehow draw the image on the canvas in byte form without converting it.
Convert the bytes to a base64 string somehow in javascript then draw.

Here's my function which receives the bytes for drawing:

function draw(imgData) {

    var img=new Image();
    img.onload = function() {
        cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

// What I was using before...
img.src = "data:image/jpeg;base64,"+imgData;

}

I was receiving the image already converted as a base64 string before, but after learning that sending the bytes is smaller in size (30% smaller?) I would prefer to get this working. I should also mention that the image is a jpeg.

Anyone know how I would do it? Thanks for the help. :)

Not setting this as an answer because it is just a guess, but could you leave the `;base64` off and `escape(imgData)`? — Malk, Aug 20 '12 at 17:07

score 5 · Accepted Answer · answered Aug 27 '12 at 12:58

5

I used this in the end:

function draw(imgData, frameCount) {
    var r = new FileReader();
    r.readAsBinaryString(imgData);
    r.onload = function(){ 
        var img=new Image();
        img.onload = function() {
            cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        img.src = "data:image/jpeg;base64,"+window.btoa(r.result);
    };
}

I needed to read the bytes into a string before using btoa().

answered Aug 27 '12 at 12:58

Joey Morani

25,431
32
84
131

1

Hi, What is the format of imgData? is it a byte array? a Blob? I have a byte array send through websockets of a png and I couldn't manage to get it to work. – Ben Jan 29 '14 at 15:37
1

Hey. I can't totally remember, but I'm pretty sure I was dealing with a Blob here. Have you tried the answer above mine? I think I needed to use the FileReader API to read the Blob, which is why the other answer didn't work for me. :) – Joey Morani Jan 29 '14 at 17:54

score 4 · Answer 2 · edited Mar 13 '15 at 17:23

If your image is really a jpeg already, you can just convert the received data to a base64 stream. Firefox and Webkit browsers (as I recall) have a certain function, btoa(). It converts the input string to a base64 encoded string. Its counterpart is atob() that does the opposite.

You could use it like the following:

function draw(imgData){
    var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands for
    var img = new Image();
    img.src = "data:image/jpeg;base64," + b64imgData;
    document.body.appendChild(img); //or append it to something else, just an example
}

If the browser you target (IE, for example) isn't Firefox or a Webkit one, you can use one of the multiple conversion function lying around the internet (good one, it also provides statistics of performances in multiple browsers, if you're interested :)

Converting bytes to an image for drawing on a HTML5 canvas

2 Answers2

Linked