Tengo una pregunta simple con un trasfondo más complicado. Nunca antes trabajé con datos de imagen, así que pase por alto mi imaginación novata de posibles soluciones.

La pregunta es ¿cómo puedo leer datos de imagen con más de 8 bits por canal, usando JavaScript?

Descargo mi imagen de la siguiente manera

 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() });

Después de eso, traté de acceder a los datos de la imagen directamente, pero solo encontré una solución, usando la API de lienzo. Probablemente mi problema comienza aquí:

 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);

La API de lienzo extrajo los datos de la imagen en una matriz 1-D en el patrón "rgba" sobre sí misma y fijó todos los valores en 8 bits. Así que un píxel está representado por cuatro valores

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

En realidad, preferiría una imagen monocromática de todos modos. El fondo es que tengo una matriz gigante de 100000 x 3000 píxeles y para cada píxel quiero almacenar un valor entero. Guardar estos datos en una imagen mantiene el tamaño de los datos increíblemente pequeño en comparación con un archivo binario sin comprimir. Con mi conocimiento actual, podría almacenar cuatro valores numéricos entre 0 y 255 en cada píxel de imagen, pero este rango es demasiado pequeño para mi propósito. Es por eso que me gustaría tener una imagen mono con un canal mono de 32 bits para almacenar un valor de -2147483648 a 2147483647 en cada píxel.

Espero haberte dado toda la información de forma accesible. ¡¡Gracias por tu ayuda!!