Image Light Enhancement Tool

function processImage(originalImg, gamma = 0.6) {
    // Validate gamma parameter
    // gamma < 1.0 brightens the image (enhances light)
    // gamma = 1.0 has no effect
    // gamma > 1.0 darkens the image
    // The tool is for "Light Enhancement", so default gamma is < 1.0.
    if (typeof gamma !== 'number' || gamma <= 0) {
        console.warn("Gamma value must be a positive number. Using default value 0.6.");
        gamma = 0.6;
    }

    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance if available

    // 2. Set canvas dimensions
    // Use naturalWidth/Height for the intrinsic size of the image.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., SVG image or not fully loaded in some contexts).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If image dimensions are zero (e.g. image not loaded or invalid), return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    // 3. Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image onto canvas:", e);
        // Return the canvas, which might be empty or partially drawn, depending on the error.
        return canvas;
    }

    // 4. Get the pixel data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data. This might be due to CORS restrictions if the image is from a different origin.", e);
        // If getImageData fails, the canvas currently holds the original image (if drawing succeeded).
        // Return the canvas as is, without modification, to fulfill the return type requirement.
        return canvas;
    }

    const data = imageData.data; // This is a Uint8ClampedArray: R, G, B, A, R, G, B, A, ...

    // 5. Create a lookup table (LUT) for gamma correction for performance
    // This avoids computing Math.pow for each pixel component.
    const gammaLUT = [];
    for (let i = 0; i <= 255; i++) {
        // The formula for gamma correction is: newValue = 255 * (oldValue / 255) ^ gamma
        // We round the result to the nearest integer.
        // The Uint8ClampedArray will clamp values to [0, 255] anyway,
        // but explicit Math.round is good for precision.
        gammaLUT[i] = Math.round(255 * Math.pow(i / 255, gamma));
    }

    // 6. Apply gamma correction to each pixel
    for (let i = 0; i < data.length; i += 4) {
        data[i] = gammaLUT[data[i]];         // Red channel
        data[i + 1] = gammaLUT[data[i + 1]]; // Green channel
        data[i + 2] = gammaLUT[data[i + 2]]; // Blue channel
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    // 8. Return the canvas element
    return canvas;
}