I have a simple question with a more complicated background. I never worked with imagedata before, so please overlook my greenhorn-imagination of possible solutions.

The question is how I can read imagedata with more than 8 bit per channel, using JavaScript?

I download my image as follows

return new Promise(function (resolve, reject) {

    TESTIMAGE32 = new Image();

    TESTIMAGE32.onload = function () {
        resolve();
    }

    TESTIMAGE32.onerror = function () {
        reject();
    }

    var date = new Date()
    TESTIMAGE32.src = "images/demo/test.png" + "?" + date.getTime()

});

After that I tried to access the image data directly, but only found a soultion, using the canvas api. Probably my problem starts here:

var canvas = document.getElementById("data_canvas")
var ctx = canvas.getContext('2d');
ctx.drawImage(TESTIMAGE32, 0, 0, 50, 50, 0, 0, 50, 50);
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

The canvas api extracted the image data to an 1-D array in the "rgba" pattern on itself and clamped all values to 8 bit. So one pixel is represented by four values

[r1, g1, b1, a1, r2, g2, b2, a2, ...]

Actually I would prefer a monochrome image anyways. The background is, that I have a giant matrix of 100000 x 3000 Pixel and for each pixel I want to store an integer value. Saving this data to an image keeps the data size incredible small compared to a uncompressed binary file. With my current knowledge I could store four numeric values between 0-255 in each image pixel, but this range is too small for my purpose. Thats why I would like to have an mono image with 32bit mono channel to store one value form -2147483648 to 2147483647 in each pixel.

I hope I gave you all the information in an accessible way. Thanks for your help!!