Image Gummy Bear Filter Effect Tool

async function processImage(
    originalImg, 
    saturationFactor = 1.8, 
    blurRadius = 4, 
    brightnessFactor = 1.1, 
    contrastFactor = 1.3
) {
    // Convert parameters to numbers. If they are invalid (NaN after conversion or inappropriate),
    // reset them to their default "gummy bear effect" values.
    // The function signature's default values handle cases where parameters are not provided (i.e., undefined).
    
    let sFactor = Number(saturationFactor);
    if (isNaN(sFactor) || sFactor < 0) {
        sFactor = 1.8; // Default saturation: vibrant
    }

    let bRadius = Number(blurRadius);
    if (isNaN(bRadius) || bRadius < 0) {
        bRadius = 4; // Default blur radius: smooth surface
    }

    let brFactor = Number(brightnessFactor);
    if (isNaN(brFactor) || brFactor < 0) {
        brFactor = 1.1; // Default brightness: slight glow
    }

    let cFactor = Number(contrastFactor);
    if (isNaN(cFactor) || cFactor < 0) {
        cFactor = 1.3; // Default contrast: pop/definition
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width || 0;
    const height = originalImg.naturalHeight || originalImg.height || 0;

    if (width === 0 || height === 0) {
        console.warn("Image Gummy Bear Filter: Input image has zero dimensions. Ensure the image is loaded correctly. Returning an empty canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

    // Construct the filter string. The order of filters can affect the final appearance.
    // This order is chosen to achieve a "gummy bear" like effect:
    // 1. Brightness: To give a base "glow" or translucency.
    // 2. Saturation: To make colors vibrant, typical of gummy bears.
    // 3. Blur: To create a smooth, somewhat waxy or gelatinous_surface.
    // 4. Contrast: To add back some definition and "pop" after blurring, enhancing perceived shine.
    const filters = [];
    if (brFactor !== 1) { // brightness(1) is a no-op
        filters.push(`brightness(${brFactor})`);
    }
    if (sFactor !== 1) { // saturate(1) is a no-op
        filters.push(`saturate(${sFactor})`);
    }
    if (bRadius > 0) { // blur(0px) is effectively a no-op
        filters.push(`blur(${bRadius}px)`);
    }
    if (cFactor !== 1) { // contrast(1) is a no-op
        filters.push(`contrast(${cFactor})`);
    }
    
    // Apply the combined filter string to the canvas context.
    // If no filters are active (all params at no-op values), this will be an empty string,
    // which is equivalent to 'none'.
    ctx.filter = filters.join(' ');

    // Draw the original image onto the canvas.
    // The applied filter will process the image during this drawing operation.
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Image Gummy Bear Filter: Error drawing image. This could be due to various reasons including Cross-Origin issues if the image source is tainted.", e);
        // Depending on the error, the canvas might be blank or partially drawn.
        // For robustness, one might clear the canvas or return a specific error indicator,
        // but for now, we log the error and return the canvas as-is.
    }
    
    // The canvas now contains the filtered image.
    return canvas;
}