Image Soft Focus Filter Effect Tool

function processImage(originalImg, blurAmount = 5, sharpness = 0.3) {
    // Sanitize blurAmount: must be a non-negative number.
    // If input is invalid (e.g., NaN after Number()), default to 0. Then ensure it's not negative.
    let actualBlurAmount = Number(blurAmount);
    if (isNaN(actualBlurAmount)) {
        actualBlurAmount = 5; // Use default if initial provided value was not a number
    }
    actualBlurAmount = Math.max(0, actualBlurAmount);

    // Sanitize sharpness: must be a number between 0 and 1.
    // If input is invalid, default to 0. Then clamp to [0, 1] range.
    let actualSharpness = Number(sharpness);
    if (isNaN(actualSharpness)) {
        actualSharpness = 0.3; // Use default if initial provided value was not a number
    }
    actualSharpness = Math.max(0, Math.min(1, actualSharpness));

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

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height if natural are 0
    // (e.g. for an un-loaded image, though this is best effort for robustness)
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    // If the image has no dimensions (e.g., not loaded, or it's a 0x0 image),
    // return an empty canvas.
    if (width === 0 || height === 0) {
        // console.warn("Image has zero dimensions or is not loaded. Returning an empty canvas.");
        return canvas;
    }

    // Step 1: Draw the base image, potentially blurred.
    // If 'actualBlurAmount' is 0, this draws the original image sharply (filter set to 'none').
    if (actualBlurAmount > 0) {
        ctx.filter = `blur(${actualBlurAmount}px)`;
    } else {
        ctx.filter = 'none'; // Ensure no blur if blurAmount is zero
    }
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset filter: ensures the next draw operation (the sharpness layer) is not affected by the blur.
    ctx.filter = 'none';

    // Step 2: Overlay the original (sharp) image with 'actualSharpness' opacity.
    // This step blends the sharp details back into the image.
    // - If 'actualSharpness' is 0, this draw operation is effectively skipped (or draws fully transparent),
    //   leaving the result of Step 1 (the blurred image, or original if blurAmount was 0).
    // - If 'actualSharpness' is 1, this draws the original image fully opaquely,
    //   effectively replacing the blurred version from Step 1 (resulting in the original image).
    // - For values between 0 and 1, it blends the sharp image with the blurred one.
    
    // Only draw the sharpness layer if it contributes (i.e., sharpness > 0).
    // If actualSharpness is 0, the blurred image from Step 1 is the final result.
    if (actualSharpness > 0) {
        ctx.globalAlpha = actualSharpness;
        ctx.drawImage(originalImg, 0, 0, width, height);
        ctx.globalAlpha = 1.0; // Reset globalAlpha to its default (1.0) for good practice.
    }
    // If actualSharpness was 0, the canvas correctly contains the image from Step 1.
    // If actualBlurAmount was also 0, this means the original image is on the canvas.
    // If actualBlurAmount > 0 and actualSharpness = 0, this means the blurred image is on the canvas.
    // Both are correct interpretations of the parameters for "maximum softness".

    return canvas;
}