JS: convertir une matrice d'octets en image

Question

Je reçois en code JS une matrice 2D d'octets (valeurs entières entre 0-255) d'une caméra et je veux l'afficher dans un élément <canvas>. Existe-t-il un moyen de convertir cette matrice en une image?

J'ai essayé d'utiliser window.atob() mais il échoue et s'arrête pour exécuter le code.

Answer 1

Oui, c'est possible. Vous devez quelque chose comme ceci (exemple pour une image 120x120):

Html:

<canvas id="canvas" width=120 height=120></canvas> 

JS:

var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext("2d"); 
var imgData = ctx.createImageData(120, 120); 
// Now you need to assign values to imgData array into groups of four (R-G-B-A) 
let j = 0; 
iterate your object { 
    imgData.data[j] = R value; 
    imgData.data[j + 1] = G value; 
    imgData.data[j + 2] = B value; 
    imgData.data[j + 3] = 255 (if greyscale); 
    j += 4; 
} 
ctx.putImageData(imgData, 0, 0);