Reading 16-bit Grayscale Images in JavaScript

The standard Canvas API's getImageData() method indeed only provides 8-bit per channel data, which is insufficient for your 16-bit grayscale images with decimal precision.

Possible Solutions

1. Use a PNG Decoder Library

For 16-bit PNG files, you'll need to use a specialized PNG decoder that can handle 16-bit depth. Your approach with arrayBuffer is on the right track, but you need to parse that buffer with a library that understands 16-bit PNG format.

JAVASCRIPTCopied
// Using a library like pngjs (you'd need to adapt this for browser use)
const PNG = require('pngjs').PNG;
const fs = require('fs');

const data = fs.readFileSync('./resources/maps/depth/depthtest1.png');
const png = PNG.sync.read(data);

// If it's a 16-bit image, png.data will contain the raw 16-bit values

2. WebAssembly Solution

For browser environments, consider using a WebAssembly module with libraries like:

• libpng compiled to WebAssembly
• OpenCV.js for image processing

3. Custom ArrayBuffer Processing

If your PNG is using a standard format for 16-bit grayscale, you can process the ArrayBuffer directly:

JAVASCRIPTCopied
async function read16BitPNG(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  
  // You'll need to implement PNG parsing logic here
  // This is complex and requires understanding the PNG format specification
  
  // For a 16-bit grayscale image, each pixel would be represented by 2 bytes
  const view = new DataView(arrayBuffer);
  
  // Skip PNG header and chunks to get to the actual pixel data
  // This requires parsing the PNG format
  
  // Create a Float32Array or Uint16Array to store the 16-bit values
  const pixelData = new Float32Array(width * height);
  
  // Fill the array with the parsed 16-bit values
  
  return {
    width: width,
    height: height,
    data: pixelData
  };
}

4. Use Specialized Libraries

Consider these libraries for handling 16-bit image data:

• UPNG.js
• pngjs (with browserify for browser use)

Example with UPNG.js

JAVASCRIPTCopied
// Using UPNG.js
import UPNG from 'upng-js';

async function get16BitDepthData(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  
  const img = UPNG.decode(arrayBuffer);
  const pixels = UPNG.toRGBA8(img); // For 16-bit grayscale, check documentation
  
  // If the image is truly 16-bit, you may need to:
  // 1. Check img.depth to confirm it's 16
  // 2. Access img.data which should contain the raw data
  
  return {
    width: img.width,
    height: img.height,
    data: img.data,
    depth: img.depth
  };
}

For decimal precision (like 12.7), you'll need to understand how these values are encoded in your specific PNG format, as standard 16-bit grayscale typically uses integer values from 0-65535.