Image Enhancement Tool

function processImage(
    originalImg,
    brightness = 100,   // Percentage (e.g., 0-N, 100 is original)
    contrast = 100,     // Percentage (e.g., 0-N, 100 is original)
    saturation = 100,   // Percentage (e.g., 0-N, 100 is original)
    grayscale = 0,      // Percentage (0-100, 0 is original)
    sepia = 0,          // Percentage (0-100, 0 is original)
    hueRotate = 0,      // Degrees (0-360 normally, 0 is original)
    blurRadius = 0,     // Pixels (e.g., 0-N, 0 is original)
    invert = 0          // Percentage (0-100, 0 is original)
) {
    // Check if originalImg is a valid, loaded HTMLImageElement
    if (!(originalImg instanceof HTMLImageElement) || !originalImg.complete || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        // console.error("Image is not fully loaded or is not a valid HTMLImageElement.");
        // Create a placeholder canvas with an error message
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 250; 
        errorCanvas.height = 50;
        const errorCtx = errorCanvas.getContext('2d');
        if (errorCtx) {
            errorCtx.fillStyle = '#F0F0F0'; 
            errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
            errorCtx.fillStyle = 'red'; 
            errorCtx.font = '12px Arial';
            errorCtx.textAlign = 'center';
            errorCtx.textBaseline = 'middle';
            errorCtx.fillText('Error: Image not loaded or invalid.', errorCanvas.width / 2, errorCanvas.height / 2);
        }
        return errorCanvas;
    }

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // console.error("Canvas 2D context is not supported on the main canvas.");
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 250;
        errorCanvas.height = 50;
        const errorCtx = errorCanvas.getContext('2d');
        if (errorCtx) {
            errorCtx.fillStyle = '#F0F0F0';
            errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
            errorCtx.fillStyle = 'red';
            errorCtx.font = '12px Arial';
            errorCtx.textAlign = 'center';
            errorCtx.textBaseline = 'middle';
            errorCtx.fillText('Error: Canvas 2D not supported.', errorCanvas.width / 2, errorCanvas.height / 2);
        }
        return errorCanvas;
    }

    const filters = [];

    if (brightness !== 100) {
        filters.push(`brightness(${brightness / 100})`);
    }
    if (contrast !== 100) {
        filters.push(`contrast(${contrast / 100})`);
    }
    if (saturation !== 100) {
        filters.push(`saturate(${saturation / 100})`);
    }
    if (grayscale !== 0) {
        filters.push(`grayscale(${grayscale}%)`);
    }
    if (sepia !== 0) {
        filters.push(`sepia(${sepia}%)`);
    }
    if (hueRotate !== 0) {
        filters.push(`hue-rotate(${hueRotate}deg)`);
    }
    if (blurRadius !== 0) {
        filters.push(`blur(${Math.max(0, blurRadius)}px)`); // Ensure blur radius is non-negative
    }
    if (invert !== 0) {
        filters.push(`invert(${invert}%)`);
    }

    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // Reset filter - not strictly necessary here as a new canvas/context is created each time.
    // ctx.filter = 'none'; 

    return canvas;
}