Converting Bytes To An Image For Drawing On A Html5 Canvas

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: So

Solution 1:

I used this in the end:

functiondraw(imgData, frameCount) {
    var r = newFileReader();
    r.readAsBinaryString(imgData);
    r.onload = function(){ 
        var img=newImage();
        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().

Solution 2:

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:

functiondraw(imgData){
    var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands forvar img = newImage();
    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 :)