JavaScriptで生成した画像配列をHTMLのimgタグで表示してみます。

これが全コードです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dispaly image array using HTML img tag</title>  
  </head>
  <body>
    <script>
      // 画像の幅、高さ
      const width = 256;
      const height = 256;

      // 一次元配列に各ピクセルのRGBA値を格納する
      const array = new Array(width * height * 4); // 4 = RGBA
      for (let y = 0; y < height; ++y) {
        for (let x = 0; x < width; ++x) {
          const index = (x + (y * width)) * 4;
          array[index] = x; // Red
          array[index + 1] = y; // Green
          array[index + 2] = 0; // Blue
          array[index + 3] = 255; // Alpha
        }
      }

      // 配列をImageDataに変換する
      const image = new ImageData(new Uint8ClampedArray(array), width, height);

      // canvasにImageDataを描画する
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext('2d');
      context.putImageData(image, 0, 0);
      // document.body.appendChild(canvas); // 確認用

      // canvasからBlobを作成する
      canvas.toBlob((blob) => {
        // BlobのURLを作成してimgタグのsrc属性に設定する
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img);
      }, 'image/png');
    </script>
  </body>
</html>

このHTMLで以下のような画像が表示されます。

ステップごとに解説します。

まず、画像配列を作成します。ここでは、横方向に赤色に、縦方向に緑色になるようにしています。RGBAの各値を8bitで表現するので、最小値が0、最大値が255になります。

// 一次元配列に各ピクセルのRGBA値を格納する
const array = new Array(width * height * 4); // 4 = RGBA
for (let y = 0; y < height; ++y) {
  for (let x = 0; x < width; ++x) {
    const index = (x + (y * width)) * 4;
    array[index] = x; // Red
    array[index + 1] = y; // Green
    array[index + 2] = 0; // Blue
    array[index + 3] = 255; // Alpha
  }
}

canvasに描画するために、ImageDataに変換します。先ほどの配列をUint8ClampedArrayに変換して引数として渡します。

// 配列をImageDataに変換する
const image = new ImageData(new Uint8ClampedArray(array), width, height);

canvas要素を作成して、先ほど生成したImageDataをputImageDataを用いて描画します。

// canvasにImageDataを描画する
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.putImageData(image, 0, 0);
// document.body.appendChild(canvas); // 確認用

canvasの描画結果をtoBlobを用いてBlobに変換します。img要素を作成して、そのsrc属性にURL.createObjectURLで作成したURLを設定します。

// canvasからBlobを作成する
canvas.toBlob((blob) => {
  // BlobのURLを作成してimgタグのsrc属性に設定する
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
}, 'image/png');

以下、参考した記事です。