Image 16-Bit Filter Effect Tool

function processImage(originalImg) {
    // 1. Create canvas and context
    const canvas = document.createElement('canvas');
    // Add { willReadFrequently: true } for performance optimization hint if getImageData is used often.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Set canvas dimensions
    // Use naturalWidth/Height for intrinsic image dimensions.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., for some SVGs or if image props were set manually).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Handle cases where image dimensions might be zero (e.g., image not loaded or invalid)
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has zero width or height. Returning an empty canvas.");
        // Return the empty (0x0 or Wx0 or 0xH) canvas.
        // The caller can decide how to handle this (e.g., display an error message).
        return canvas;
    }

    // 3. Draw original image onto canvas
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image onto canvas: ", e);
        // This can happen if the image object is not a valid image source (e.g., broken image, security issue with SVG).
        // Return the canvas, which might be empty or partially drawn.
        return canvas;
    }
    
    // 4. Get image data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData. This can happen due to cross-origin restrictions if the image is hosted on a different domain without CORS headers.", e);
        // If pixel manipulation is not possible, return the canvas with the original image drawn on it.
        // The original image is already drawn at this point from the step above.
        return canvas;
    }

    const data = imageData.data;

    // 5. Process pixels for 16-bit color effect (simulating R5G6B5 color depth)
    // This means:
    // Red channel: 5 bits (original 8 bits are reduced to 5 most significant bits)
    // Green channel: 6 bits (original 8 bits are reduced to 6 most significant bits)
    // Blue channel: 5 bits (original 8 bits are reduced to 5 most significant bits)
    // Alpha channel is left unchanged.

    // Number of bits to discard from each 8-bit channel:
    const rDiscardBits = 8 - 5; // Discard 3 bits for Red
    const gDiscardBits = 8 - 6; // Discard 2 bits for Green
    const bDiscardBits = 8 - 5; // Discard 3 bits for Blue

    // This quantization method (right-shift then left-shift) effectively truncates
    // the lower bits, mapping the 0-255 range to a smaller set of values.
    // For Red (5 bits): 2^5 = 32 levels (e.g., 0, 8, 16, ..., 248)
    // For Green (6 bits): 2^6 = 64 levels (e.g., 0, 4, 8, ..., 252)
    // For Blue (5 bits): 2^5 = 32 levels (e.g., 0, 8, 16, ..., 248)
    // Total colors = 32 * 64 * 32 = 65,536 (which is 2^16).

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];    // Original Red
        const g = data[i+1];  // Original Green
        const b = data[i+2];  // Original Blue
        // data[i+3] is Alpha, left unchanged

        // Quantize R, G, B components
        data[i]   = (r >> rDiscardBits) << rDiscardBits;
        data[i+1] = (g >> gDiscardBits) << gDiscardBits;
        data[i+2] = (b >> bDiscardBits) << bDiscardBits;
    }

    // 6. Put modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 7. Return the processed canvas
    return canvas;
}