javascript - 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.

Answer 1

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);
    };

}