How to Calculate Histogram for 32-bit TIFF Image Pixels for Contrast Stretching in JavaScript

I’m working on an image processing application where I need to perform contrast stretching on 32-bit TIFF images using JavaScript. My goal is to calculate the histogram of the image pixels data to determine the appropriate contrast stretching parameters. However, I’m encountering issues with the histogram calculation not producing valid values.

Here’s my current approach:

   function calculateHistogram(pixelData) {
    const binCounts = new Array(256).fill(0);
    pixelData.forEach((pixelValue) => {
    const binIndex = Math.floor(pixelValue / 256); // Assuming 32-bit values are in [0, 
     255]
    binCounts[binIndex]++;
    });
     return binCounts;
   }
  const ContrastStretchedImage = () => {
  const [dataObj, setDataObj] = useState({});
  const [canvasImage, setCanvasImage] = useState(null);
  const [minMaxValue, setMinMaxValue] = useState({ min: 0, max: 0 });
  const plotRef = useRef(null);
  const plotRefForWithoutContrastStretching = useRef(null);
  useEffect(() => {
    axios({
      url: "tiff-image-url",
      method: "GET",
      responseType: "arraybuffer",
    })
      .then(async (response) => {
        const arrayBuffer = await fromArrayBuffer(response.data);
        const image = await arrayBuffer.getImage();
        const pixelsData = await image.readRasters();
        setDataObj({ arrayBuffer, image, pixelsData });
      })
      .catch((error) => error);
  }, []);

  /* useEffect that constantly monitors changes in plot-ref */
  useEffect(() => {
    if (plotRef?.current) {
      plotRef?.current?.render();
      setCanvasImage(plotRef?.current?.canvas);
    }
  }, [plotRef, plotRef?.current?.currentDataset, plotRef?.current?.canvas]);

  const getTiff = useCallback(() => {
    const width = dataObj.image.getWidth();
    const height = dataObj.image.getHeight();
    const histogram = calculateHistogram(dataObj.pixelsData[0]);
    console.log({ histogram });
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;

    if (plotRef?.current === null) {
      plotRef.current = new plot({
        canvas,
        domain: [36, 60],
        colorScale: "inferno",
      });
      plotRef.current.setData(dataObj?.pixelsData[0], width, height);
    } else {
      plotRef?.current.setData(dataObj?.pixelsData[0], width, height);
    }

    setCanvasImage(canvas);
  }, [dataObj]);

  /* useEffect to updated the domain value of the rendered image */
  useEffect(() => {
    plotRef?.current?.setDomain([30, 60]);
  }, [plotRef]);

  useEffect(() => {
    if (dataObj?.image) {
      getTiff();
    }
  }, [dataObj]);

  return (
    <>
      <div style={{ display: "flex", margin: "2rem" }}>
        <div>
          <Stage width={600} height={600}>
            <Layer>
              <KonvaImage image={canvasImage} width={600} height={600} />
            </Layer>
          </Stage>
        </div>
      </div>
    </>
  );
};

I suspect the issue lies in the calculateHistogram function, especially in how I calculate the binIndex. I understand that 32-bit images have a much larger range of values, but I’m not sure how to adjust my function to accommodate this.