Как извлечь данные изображения из файла NIFTI, а затем установить данные в элемент canvas без какого-либо внешнего пакета

Question

У меня есть этот код, который читает файл с именем: someones_epi.nii.gz этот файл является двоичным.

и затем с этим пакетом npm nifti-reader-js я прочитал содержимое этого файла. моя проблема в том, что я получаю arrayBuffer в качестве ответа и хочу использовать эти данные arrayBuffer для рендеринга изображения на элементе HTML canvas, как я могу это сделать с ArrayBuffers и uint8Arrays, может кто-нибудь показать мне пример, который показывает, как читать этот буфер массива и затем отображает на элементе canvas изображения, содержащиеся в этом файле.

Мой код пока что

index.html

<div id="target2"></div>

nifti.ts

import * as nifti from 'nifti-reader-js';

const fs = window['require']('fs');

export class Nifti {

  constructor() {

  }

  readNifti() {

    const brainFile = './dist/assets/test/someones_epi.nii.gz';

    let data = fs.readFileSync(brainFile).buffer;

    let niftiHeader = null;
    let niftiImage = null;
    const niftiExt = null;

    if (nifti.isCompressed(data)) {
      data = nifti.decompress(data);
    }

    niftiHeader = nifti.readHeader(data);
    console.log(niftiHeader.toFormattedString());

    niftiImage = nifti.readImage(niftiHeader, data);
    console.log('niftiImage', niftiImage);

    this.draw(niftiImage);
    // this.testDraw();
  }

  draw(arraybuffer) {

    console.log('data: ', arraybuffer);

    // const pixelData = new Uint8Array(arraybuffer, frameOffset, numPixels);
    const screenMax = 200;
    const screenMin = 200;
    let screenRatio = 255 / (screenMax - screenMin);
    screenRatio = 255 / (5000 - 1000);



    // set up canvas
    const container = document.getElementById('target2');
    const canvas: HTMLCanvasElement = document.createElement('canvas');
    canvas.width = 200;
    canvas.width = 200;


    const ctx = canvas.getContext('2d');


    const imageData = ctx.createImageData(200, 200);
    const alpha = 255;
    const n = imageData.data.length;

    for (let index = 0; index < n; index++) {

      let screenValue = (arraybuffer - screenMin) * screenRatio;
      screenValue = (arraybuffer - 1000) * screenRatio;

      imageData.data[index] = (arraybuffer[index] >> 16) & 0xff;
      imageData.data[index + 1] = (arraybuffer[index] >> 8) & 0xff;
      imageData.data[index + 2] = (arraybuffer[index]) & 0xff;
      imageData.data[index + 3] = alpha;
    }

    ctx.putImageData(imageData, 0, 0);
    container.appendChild(canvas);
  }


  testDraw() {
    const container = document.getElementById('target2');

    const canvas: HTMLCanvasElement = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.createImageData(100, 100);

    // Iterate through every pixel
    for (let i = 0; i < imageData.data.length; i += 4) {
      // Percentage in the x direction, times 255
      let x = (i % 400) / 400 * 255;
      // Percentage in the y direction, times 255
      let y = Math.ceil(i / 400) / 100 * 255;

      // Modify pixel data
      imageData.data[i + 0] = x;        // R value
      imageData.data[i + 1] = y;        // G value
      imageData.data[i + 2] = 255 - x;  // B value
      imageData.data[i + 3] = 255;      // A value
    }

    // Draw image data to the canvas
    ctx.putImageData(imageData, 20, 20);
    container.appendChild(canvas);
  }
}

Я получаю этот вывод с консоли.