Image Background Blur Tool

function processImage(
    originalImg,
    blurRadius = 10,    // Gaussian blur radius in pixels for the background
    focusX = "50%",     // Center X of the focus area. String: "50%", "100px", or number for pixels.
    focusY = "50%",     // Center Y of the focus area. String: "50%", "100px", or number for pixels.
    focusWidth = "60%", // Width of the focus area. String: "60%", "200px", or number for pixels.
    focusHeight = "40%",// Height of the focus area. String: "40%", "150px", or number for pixels.
    feather = "10%"     // Feathering amount for the focus edge. String: "10%", "20px", or number for pixels.
                        // If '%', it's relative to the smaller of focusWidth and focusHeight.
) {

    // Helper function to parse dimension values (string or number)
    // value:            The dimension value (e.g., "50%", "100px", 100)
    // totalSizeForPx:   Reference size if value is just a number (not used if value is '%')
    // percentageReference: Size to use for calculating '%' (e.g., image width, focus width)
    const _parseDim = (value, totalSizeForPx, percentageReference = totalSizeForPx) => {
        if (typeof value === 'string') {
            if (value.endsWith('%')) {
                return (parseFloat(value) / 100) * percentageReference;
            }
            return parseFloat(value); // Assumes px if string like "100" or "100px"
        }
        if (typeof value === 'number') {
            return value; // Assumed to be px
        }
        console.warn(`Could not parse dimension value: ${value}. Using 0.`);
        return 0;
    };

    // Global Composite Operation constants for clarity
    const GCO_DEST_IN = 'destination-in';
    const GCO_DEST_OVER = 'destination-over';
    const GCO_SOURCE_OVER = 'source-over'; // Default

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image might not be loaded or has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure it is loaded before processing.");
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        // Optionally, draw a small error indicator or leave blank
        // const errCtx = emptyCanvas.getContext('2d');
        // errCtx.fillStyle = 'red';
        // errCtx.fillRect(0,0,1,1);
        return emptyCanvas;
    }
    
    // Main canvas for the final result
    const canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const ctx = canvas.getContext('2d');

    // 1. Create a fully blurred version of the original image
    const blurredCanvas = document.createElement('canvas');
    blurredCanvas.width = imgWidth;
    blurredCanvas.height = imgHeight;
    const blurredCtx = blurredCanvas.getContext('2d');
    
    if (blurRadius > 0) {
      blurredCtx.filter = `blur(${blurRadius}px)`;
    }
    blurredCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    if (blurRadius > 0) {
      blurredCtx.filter = 'none'; // Reset filter to avoid affecting other operations
    }

    // 2. Draw the original (sharp) image onto the main canvas. This will be selectively kept.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 3. Create the mask for the focus area
    const maskCanvas = document.createElement('canvas');
    maskCanvas.width = imgWidth;
    maskCanvas.height = imgHeight;
    const maskCtx = maskCanvas.getContext('2d'); 

    // Parse focus parameters to pixel values
    const parsedCenterX = _parseDim(focusX, imgWidth, imgWidth);
    const parsedCenterY = _parseDim(focusY, imgHeight, imgHeight);
    
    const parsedFocusWidth = _parseDim(focusWidth, imgWidth, imgWidth);
    const parsedFocusHeight = _parseDim(focusHeight, imgHeight, imgHeight);
    
    // Ensure radii are positive for the ellipse
    const radiusX = Math.max(1, parsedFocusWidth / 2);
    const radiusY = Math.max(1, parsedFocusHeight / 2);

    // Calculate feather amount in pixels
    const minFocusDimension = Math.min(parsedFocusWidth, parsedFocusHeight);
    let featherAmount = _parseDim(feather, minFocusDimension, minFocusDimension);
    featherAmount = Math.max(0, featherAmount); // Ensure non-negative

    // Create the basic mask:
    // Fill with black (will be transparent area for destination-in when shape is white)
    maskCtx.fillStyle = 'black';
    maskCtx.fillRect(0, 0, imgWidth, imgHeight);

    // Draw the white focus shape (ellipse) onto the mask
    maskCtx.fillStyle = 'white'; // White part will be opaque in the mask
    maskCtx.beginPath();
    maskCtx.ellipse(parsedCenterX, parsedCenterY, radiusX, radiusY, 0, 0, 2 * Math.PI);
    maskCtx.fill();

    // 4. Feather the mask if featherAmount > 0
    if (featherAmount > 0) {
        // Use a temporary canvas to apply blur to the mask, then draw back to maskCanvas
        const tempFeatherCanvas = document.createElement('canvas');
        tempFeatherCanvas.width = imgWidth;
        tempFeatherCanvas.height = imgHeight;
        const tempFeatherCtx = tempFeatherCanvas.getContext('2d');

        tempFeatherCtx.filter = `blur(${featherAmount}px)`;
        // Draw the sharp mask onto the temp canvas; the blur filter will be applied during this draw
        tempFeatherCtx.drawImage(maskCanvas, 0, 0); 
        tempFeatherCtx.filter = 'none'; // Reset filter

        // Clear the original sharp mask and draw the feathered version back
        maskCtx.clearRect(0, 0, imgWidth, imgHeight); 
        maskCtx.drawImage(tempFeatherCanvas, 0, 0); 
    }

    // 5. Composite: Use the mask to cut out the focused part from the sharp image.
    // 'destination-in': The existing canvas content (sharp image) is kept where it overlaps
    // with the new shape (the white, feathered parts of the mask).
    ctx.globalCompositeOperation = GCO_DEST_IN;
    ctx.drawImage(maskCanvas, 0, 0);

    // 6. Composite: Draw the blurred image underneath.
    // 'destination-over': The new shape (blurred image) is drawn behind the existing
    // canvas content (the sharp, masked focus area).
    ctx.globalCompositeOperation = GCO_DEST_OVER;
    ctx.drawImage(blurredCanvas, 0, 0);

    // Reset composite operation to default for good practice
    ctx.globalCompositeOperation = GCO_SOURCE_OVER;

    return canvas;
}