Creating an Image from a Uint8 DataView ... or ArrayBuffer

Question

Looking for some practical advise and knowledge around creating an Image from raw binary data in JavaScript / TypeScript.

I have the raw binary data, but the format is application/fits, therefore I have some meta data whereby I know the height and the width of the image, in pixels, e.g., 1000 x 2000. I also know the data is Uint8, again from the meta data.

I am starting from the point of having data as an ArrayBuffer.

I then create a DataView from this ArrayBuffer, as:

const dataView = new DataView(buffer);

I then take this dataView, and create a pixel array, of type number[][]

const pixels: number[][] = Array.from({ length: height }, () => []);

I then know that I can do the following:

for (let y = 0; y < height; y++) {
    const row: number[] = [];

    for (let x = 0; x < width; x++) {
      const pixelIndex = y * width + x;
      row.push(dataView.getUint8(pixelIndex));
    }

    pixels.push(row);
  }

Creating the pixel array of [][]number, of value uint8, e.g., between 0 and 255.

---

My goal is to create a viewable Monochromatic JPEG image in the browser, so I was wondering if:

a.) What I have thus far is correct, (or at least), partially correct ... ? b.) I could somehow make an image from the initial ArrayBuffer...?
c.) How I could go about now creating an img.src from some representation of the data, (maybe base64)?

Calling on the knowledge of the Image gods here, as I am very much taking my first dive into this world.

---

I have also tried a flatter Uin8Array structure, as:

const parseFITSDataBlock = (block: ArrayBuffer, height: number, width: number) => {
  const dataView = new DataView(block)

  const rank = width * height

  const pixels: number[] = Array.from<unknown, number>({ length: rank }, () => 0)

  for (let i = 0; i < rank; i++) {
    pixels[i] = dataView.getUint8(i)
  }

  return {
    pixels
  }
}

And directly utilising:

URL.createObjectURL(new Blob([pixels.value], { type: 'image/bmp' })

And updating the Image element's img.src , but all I see is a malformed, broken image.