Image Hexadecimal Filter Effect Tool

function processImage(originalImg, levelsPerChannel = 6) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // Handle cases where the image might not be loaded or has zero dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions or is not loaded. Returning an empty canvas.");
        return canvas;
    }
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    // Validate and prepare levelsPerChannel
    let numLevels = Number(levelsPerChannel); // Ensure it's treated as a number

    if (isNaN(numLevels) || !isFinite(numLevels)) {
        console.warn(`Invalid levelsPerChannel value: "${levelsPerChannel}". Using default value of 6.`);
        numLevels = 6; // Default to 6 levels if input is invalid
    }
    
    numLevels = Math.round(numLevels); // Ensure it's an integer

    // Clamp numLevels to a sensible range [2, 256]
    // 2 levels means each channel will be either 0 or 255.
    // 256 levels means no change to color depth (0-255 for each channel).
    if (numLevels < 2) {
        numLevels = 2;
    } else if (numLevels > 256) {
        numLevels = 256;
    }

    // Calculate the factor for quantization.
    // If numLevels is 2, factor is 255. Pixel channel values will be mapped to 0 or 255.
    // If numLevels is 256, factor is 1. Pixel channel values will be (almost) unchanged.
    // If numLevels is 6, factor is 255 / (6-1) = 51. Values: 0, 51, 102, 153, 204, 255.
    const factor = 255 / (numLevels - 1);

    // Iterate through each pixel in the image data
    for (let i = 0; i < data.length; i += 4) {
        // Get original R, G, B values
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha (data[i + 3]) is left unchanged

        // Quantize each color channel
        // 1. Divide by factor: scale current value to the range [0, numLevels-1]
        // 2. Round: find the nearest level index
        // 3. Multiply by factor: scale back to the range [0, 255], getting the new color value for that level
        // 4. Final Math.round: ensure the result is an integer, as color components are integers.
        //    (ImageData.data elements are automatically clamped and floored, but rounding is more accurate)
        data[i] = Math.round(Math.round(r / factor) * factor);
        data[i + 1] = Math.round(Math.round(g / factor) * factor);
        data[i + 2] = Math.round(Math.round(b / factor) * factor);
    }

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

    return canvas;
}