JS：バイトの行列を画像に変換する

Question

カメラからJSのコード（0〜255の整数値）の2次元行列を取得しています。これを<canvas>要素に表示したいとします。この行列を画像に変換する方法はありますか？

window.atob()を使用しようとしましたが、コードの実行に失敗して停止しました。

Answer 1

はい、可能です。あなたはこのような何か（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);