Image Marshmallow Filter Effect Tool

function processImage(
    originalImg,             // JavaScript Image object
    blurRadius = 3,          // Amount of blur in pixels (e.g., 0 for no blur, 5 for noticeable blur)
    brightnessPercent = 120, // Brightness adjustment in percentage (100 is original, >100 is brighter, <100 is darker)
    contrastPercent = 80,    // Contrast adjustment in percentage (100 is original, >100 is more contrast, <100 is less contrast)
    saturationPercent = 85,  // Saturation adjustment in percentage (100 is original, 0 is grayscale, >100 is more saturated)
    tintColorRGB = "255,255,255", // Tint color in "R,G,B" string format (e.g., "255,255,255" for white)
    tintOpacity = 0.1        // Tint opacity (0.0 to 1.0, where 0 is fully transparent and 1 is fully opaque)
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are invalid (e.g., image not loaded), return a small error indicator canvas
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure the image is loaded and has valid dimensions before processing.");
        canvas.width = 50; // Small canvas to display error text
        canvas.height = 30;
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '10px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Img Dim.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }

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

    // Construct the filter string using CSS filter syntax.
    // Filters are applied in the order they appear in the string.
    const filters = [];
    if (blurRadius > 0) {
        filters.push(`blur(${blurRadius}px)`);
    }
    // Clamp brightness, contrast, saturation to non-negative values as negative values can be invalid or have unexpected behavior.
    filters.push(`brightness(${Math.max(0, brightnessPercent)}%)`);
    filters.push(`contrast(${Math.max(0, contrastPercent)}%)`);
    filters.push(`saturate(${Math.max(0, saturationPercent)}%)`);
    
    ctx.filter = filters.join(' ');

    // Draw the original image onto the canvas.
    // The filters will be applied as the image is drawn.
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image to canvas:", e);
        // Fallback: Clear canvas and draw an error message if drawImage fails (e.g. tainted canvas with certain operations)
        ctx.clearRect(0,0,canvas.width, canvas.height); // Clear any partial drawing
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error drawing image', canvas.width / 2, canvas.height / 2);
        return canvas;
    }


    // Apply a tint overlay if specified.
    // This is drawn *after* the main image and its filters.
    // The tint itself should not be affected by the image's filters, so reset ctx.filter.
    if (tintOpacity > 0 && typeof tintColorRGB === 'string' && tintColorRGB.trim() !== "") {
        ctx.filter = 'none'; // Reset filter for the tint layer

        const colorParts = tintColorRGB.split(',');
        if (colorParts.length === 3) {
            const r = parseInt(colorParts[0].trim(), 10);
            const g = parseInt(colorParts[1].trim(), 10);
            const b = parseInt(colorParts[2].trim(), 10);

            // Check if all color components parsed correctly to numbers and are within a valid range for RGB (0-255)
            // although rgba() often clamps values, it's good practice.
            if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
                const validR = Math.max(0, Math.min(255, r));
                const validG = Math.max(0, Math.min(255, g));
                const validB = Math.max(0, Math.min(255, b));
                const validOpacity = Math.max(0, Math.min(1, tintOpacity));

                ctx.fillStyle = `rgba(${validR}, ${validG}, ${validB}, ${validOpacity})`;
                ctx.fillRect(0, 0, imgWidth, imgHeight);
            } else {
                console.warn(`Invalid number in tintColorRGB: "${tintColorRGB}". Expected "R,G,B" with numeric values. Skipping tint.`);
            }
        } else {
            console.warn(`Invalid tintColorRGB format: "${tintColorRGB}". Expected "R,G,B" (3 comma-separated values). Skipping tint.`);
        }
    }
    
    return canvas;
}