Wie zeichne ein Bild auf der Leinwand von einem Byte-Array in JPEG-oder PNG-Format

Question

Wie der Titel sagt, habe ich eine Byte-Array für den Inhalt eines Bildes (kann jpeg oder png sein).

ich, dass auf einer regulären Leinwand Objekt

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

Wie kann ich das tun zeichnen wollen?

---

UPDATE ich versuchte, diese (unsuccesfully): (imgData ein PNG als Byte-Array gesendet wird, durch WebSockify an den Client "wie sie ist")

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 immer img.onerror()

erreichen

Auch Nach dem Lesen der Datei mit einem HEX-Editor auf meinem Dateisystem kann ich sehen, dass das Byte-Array identisch mit der ursprünglichen Datei ist.

Answer 1

Dieses Werk:

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

}