How to Draw an image on canvas from a byte array in jpeg or png format
arrays, canvas, html, javascript, websocket
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);
};
}
Problem
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.