Image Color Graduated Filter Effect Tool

function processImage(originalImg, colorString = "rgba(255, 165, 0, 0.5)", startRatio = 0.0, endRatio = 0.5, direction = "vertical") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions, falling back to 0 if not available
    const imgWidth = originalImg.naturalWidth || originalImg.width || 0;
    const imgHeight = originalImg.naturalHeight || originalImg.height || 0;
    
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    // Only draw if dimensions are valid
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } else {
        // If image has no size, the canvas will be 0x0.
        // Further operations might not make sense or might error on some browsers,
        // but fillRect(0,0,0,0) is a no-op.
        console.warn("Original image has zero dimensions. Output canvas will be empty.");
    }

    // Helper function to parse a CSS color string into an RGBA object
    // Uses the browser's CSS parsing capabilities for robustness.
    function getRGBAlpha(colorStr) {
        let r = 0, g = 0, b = 0, a = 0; // Default to transparent black

        // Create a temporary div to apply the color and get computed style
        // This reliably parses various CSS color formats (named, hex, rgb, rgba, hsl, etc.)
        const tempDiv = document.createElement('div');
        tempDiv.style.color = colorStr; // Apply the color string

        // Element must be in the document for getComputedStyle to work for some browsers/cases
        if (document.body) { // Check if document.body is available
            document.body.appendChild(tempDiv);
            const computedColor = window.getComputedStyle(tempDiv).color;
            document.body.removeChild(tempDiv);

            // Parse "rgb(r, g, b)" or "rgba(r, g, b, a)" format returned by getComputedStyle
            const match = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
            if (match) {
                r = parseInt(match[1], 10);
                g = parseInt(match[2], 10);
                b = parseInt(match[3], 10);
                a = match[4] !== undefined ? parseFloat(match[4]) : 1; // Default alpha to 1 if not present
            } else {
                 // This case might happen if colorString was invalid and getComputedStyle returned something unexpected
                 console.warn("Could not parse computed color:", computedColor, "from input:", colorStr);
            }
        } else {
            // Fallback for environments where document.body is not available (e.g., some test runners, Web Workers without DOM access)
            // This basic fallback only handles simple hex; for full support, a dedicated color parsing library would be needed
            // or ensure the function runs in a context where document.body is present.
            console.warn("document.body not available for robust color parsing. Attempting basic parsing.");
            if (colorStr.startsWith("#")) {
                let hex = colorStr.slice(1);
                if (hex.length === 3) hex = hex.split('').map(c => c+c).join('');
                if (hex.length === 6) {
                    r = parseInt(hex.substring(0,2), 16);
                    g = parseInt(hex.substring(2,4), 16);
                    b = parseInt(hex.substring(4,6), 16);
                    a = 1;
                }
            } else {
                 console.warn("Basic color parsing failed for:", colorStr);
            }
        }
        return { r, g, b, a };
    }

    const parsedColor = getRGBAlpha(colorString);
    
    // The start of the gradient uses the parsed color (including its original alpha)
    const gradientStartColor = `rgba(${parsedColor.r}, ${parsedColor.g}, ${parsedColor.b}, ${parsedColor.a})`;
    // The end of the gradient uses the same RGB components but is fully transparent (alpha 0)
    const gradientEndColor = `rgba(${parsedColor.r}, ${parsedColor.g}, ${parsedColor.b}, 0)`;

    // Parameters startRatio and endRatio can be numbers or strings.
    // Parse them to numbers, provide fallbacks for NaN, and clamp to [0, 1].
    let sRatio = parseFloat(String(startRatio));
    let eRatio = parseFloat(String(endRatio));

    // If parsing results in NaN, use the default values as specified in function signature.
    if (isNaN(sRatio)) sRatio = 0.0; 
    if (isNaN(eRatio)) eRatio = 0.5;
    
    sRatio = Math.max(0, Math.min(1, sRatio));
    eRatio = Math.max(0, Math.min(1, eRatio));

    let gradient;
    // Normalize direction string (remove whitespace, convert to lowercase)
    const normalizedDirection = String(direction).trim().toLowerCase();

    if (canvas.width === 0 && canvas.height === 0) {
        // No point in creating gradient for 0x0 canvas
        return canvas;
    }

    if (normalizedDirection === "horizontal") {
        gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    } else { // Default to "vertical" for any other string or if unspecified
        gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    }

    // Add color stops to the gradient.
    // The gradient will transition from gradientStartColor at sRatio
    // to gradientEndColor at eRatio.
    // Canvas API handles extending colors beyond the defined stop range.
    gradient.addColorStop(sRatio, gradientStartColor);
    gradient.addColorStop(eRatio, gradientEndColor);

    // Apply the gradient as an overlay
    // The fillRect covers the entire canvas. The gradient's alpha channel
    // determines how it blends with the original image drawn underneath.
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    return canvas;
}