How to Draw an image on canvas from a byte array in jpeg or png format

Question

Like the title says, I have a byte array representing the contents of an image (can be jpeg or png).

I want to draw that on a regular canvas object

<canvas id='thecanvas'></canvas>

How can I do that?

---

UPDATE I tried this (unsuccesfully): (imgData is a png sent as a byte array "as is" through WebSockify to the client)

function draw(imgData) {
    "use strict";

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var rdr = new FileReader();
    var imgBlob = new Blob([imgData], {type: "image/png"});
    rdr.readAsBinaryString(imgBlob);

    rdr.onload = function (data) {
        console.log("Filereader success");
        var img = new Image();
        img.onload = function () {
            console.log("Image Onload");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.onerror = function (stuff) {
            console.log("Img Onerror:", stuff);
        };
        img.src = "data:image/png;base64," + window.btoa(rdr.result);
    };

}

I always reach img.onerror()

Also After reading the file with a HEX editor on my file system, I can see that the byte array is identical to the original file.

Solution

This Works:

function draw2(imgData, coords) {
    "use strict";
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    //var uInt8Array = new Uint8Array(imgData);
    var uInt8Array = imgData;
    var i = uInt8Array.length;
    var binaryString = [i];
    while (i--) {
        binaryString[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    var img = new Image();
    img.src = "data:image/png;base64," + base64;
    img.onload = function () {
        console.log("Image Onload");
        ctx.drawImage(img, coords[0], coords[1], canvas.width, canvas.height);
    };
    img.onerror = function (stuff) {
        console.log("Img Onerror:", stuff);
    };

}

Comments

[Gera4463]

This actualy works but what if I want to keep the proportions from the original image?

[Gera4463]

Done, you can meassure the img and do the math, Thanks

[Bob]

I removed the width/height attrs from canvas and set them in the onload method before drawing the image and this scaled the image properly from 300x150 to 640x480. Initially the image was only being displayed in 300x150 even though the browser thought it was 640x480.: image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage( image,0,0, canvas.width, canvas.height );

[Rune Jeppesen]

coords is not defined?