Image Aurora Filter Application

function processImage(originalImg, auroraColor1Str = "50,255,150", auroraColor2Str = "120,80,220", rawIntensity = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is loaded and has dimensions.
    // naturalWidth/Height are for HTMLImageElement, width/height for other sources like another canvas.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        // If image has no dimensions, return an empty canvas or handle error
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero width or height.");
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

    // Helper to parse R,G,B color strings and validate values
    // Falls back to parsing the provided default string if the primary one is malformed.
    const parseAndValidateColor = (colorStr, defaultColorStr) => {
        let colorArray;
        try {
            const parts = colorStr.split(',').map(c => parseInt(c.trim(), 10));
            if (parts.length === 3 && parts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
                colorArray = parts;
            } else {
                // console.warn(`Invalid color string: "${colorStr}". Must be R,G,B with values 0-255. Using default: "${defaultColorStr}".`);
                colorArray = defaultColorStr.split(',').map(c => parseInt(c.trim(), 10));
            }
        } catch (e) {
            // console.warn(`Error parsing color string: "${colorStr}". Using default: "${defaultColorStr}".`);
            colorArray = defaultColorStr.split(',').map(c => parseInt(c.trim(), 10));
        }
        return colorArray;
    };
    
    // Parse colors, falling back to their own default strings if they are malformed
    // These hardcoded default strings match the function parameter defaults.
    const c1 = parseAndValidateColor(auroraColor1Str, "50,255,150");
    const c2 = parseAndValidateColor(auroraColor2Str, "120,80,220");

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Clamp intensity to a 0-1 range for predictable blending
    const intensity = Math.max(0, Math.min(1, rawIntensity));

    // If intensity is 0, no effect is applied, return canvas with original image
    if (intensity === 0) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha (data[i+3]) remains unchanged

        // Calculate luminance of the original pixel (normalized 0-1)
        // Standard sRGB luminance coefficients
        const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255.0;

        // Determine the aurora tint color. This tint linearly interpolates between c1 and c2
        // based on the original pixel's luminance.
        // Brighter original pixels (high luminance) will lean towards c1.
        // Darker original pixels (low luminance) will lean towards c2.
        const tint_r = c1[0] * luminance + c2[0] * (1 - luminance);
        const tint_g = c1[1] * luminance + c2[1] * (1 - luminance);
        const tint_b = c1[2] * luminance + c2[2] * (1 - luminance);

        // Blend the original pixel color with the calculated aurora tint
        // The `intensity` parameter controls the strength of this blend.
        // newRed = originalRed * (1 - intensity) + tintRed * intensity
        let blended_r = r * (1 - intensity) + tint_r * intensity;
        let blended_g = g * (1 - intensity) + tint_g * intensity;
        let blended_b = b * (1 - intensity) + tint_b * intensity;

        // Ensure values are within [0, 255] and are integers for pixel data
        // Uint8ClampedArray would do this implicitly, but explicit clamping and rounding is clearer.
        data[i]     = Math.round(Math.max(0, Math.min(255, blended_r)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, blended_g)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, blended_b)));
    }

    // Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}