Photo Dreamy Filter Application

function processImage(originalImg, blurAmount = 4, blendOpacity = 0.6, blendMode = 'soft-light', brightness = 1.05, contrast = 1.0, saturation = 0.9) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are numbers where expected
    blurAmount = Number(blurAmount);
    blendOpacity = Number(blendOpacity);
    brightness = Number(brightness);
    contrast = Number(contrast);
    saturation = Number(saturation);

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

    // 1. Create a blurred version of the image on a temporary canvas
    const blurCanvas = document.createElement('canvas');
    const blurCtx = blurCanvas.getContext('2d');
    blurCanvas.width = width;
    blurCanvas.height = height;

    if (blurAmount > 0) {
        blurCtx.filter = `blur(${blurAmount}px)`;
    }
    blurCtx.drawImage(originalImg, 0, 0, width, height);
    blurCtx.filter = 'none'; // Reset filter for the temporary canvas context

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

    // 3. Blend the blurred image onto the main canvas
    // Only blend if blur was applied or opacity makes sense
    if (blurAmount > 0 && blendOpacity > 0) {
        ctx.globalAlpha = blendOpacity;
        // Validate blendMode to prevent errors, default to 'source-over' if invalid.
        // Common valid blend modes: 'source-over', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'.
        // We'll assume the provided blendMode is valid as per modern browser support.
        ctx.globalCompositeOperation = blendMode;
        ctx.drawImage(blurCanvas, 0, 0, width, height);

        // Reset blending properties
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }


    // 4. Apply final brightness, contrast, saturation adjustments to the composited image
    // These filters are applied simultaneously.
    const needsAdjustment = brightness !== 1.0 || contrast !== 1.0 || saturation !== 1.0;

    if (needsAdjustment) {
        // Create a temporary canvas to hold the current state of the main canvas
        const tempCompositeCanvas = document.createElement('canvas');
        const tempCompositeCtx = tempCompositeCanvas.getContext('2d');
        tempCompositeCanvas.width = width;
        tempCompositeCanvas.height = height;

        tempCompositeCtx.drawImage(canvas, 0, 0); // Copy current blended image from main canvas

        ctx.clearRect(0, 0, width, height); // Clear the main canvas

        let filterString = '';
        if (brightness !== 1.0) filterString += `brightness(${brightness}) `;
        if (contrast !== 1.0) filterString += `contrast(${contrast}) `;
        if (saturation !== 1.0) filterString += `saturate(${saturation})`;
        
        ctx.filter = filterString.trim();
        ctx.drawImage(tempCompositeCanvas, 0, 0, width, height); // Draw back with filters
        ctx.filter = 'none'; // Reset filter on main canvas
    }

    return canvas;
}