Image Side Blur Effect Tool

/**
 * Applies a blur effect to the left and right sides of an image.
 * The center of the image remains in focus.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} blurAmount The radius of the blur in pixels. A larger value creates a more intense blur. Defaults to 10.
 * @param {number} sideWidthPercentage The width of each blurred side as a percentage of the total image width. For example, 20 means 20% on the left and 20% on the right will be blurred. Defaults to 20.
 * @returns {HTMLCanvasElement} A new canvas element with the side blur effect applied.
 */
function processImage(originalImg, blurAmount = 10, sideWidthPercentage = 20) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Sanitize input parameters to ensure they are valid numbers
    const validBlurAmount = Math.max(0, Number(blurAmount));
    const validSideWidthPercentage = Math.max(0, Math.min(50, Number(sideWidthPercentage)));

    // If there's no blur or the side width is zero, just draw the original image and return
    if (validBlurAmount === 0 || validSideWidthPercentage === 0) {
        ctx.drawImage(originalImg, 0, 0, width, height);
        return canvas;
    }

    // --- Main Logic: Draw the blurred background first, then the clear center ---

    // 1. Draw the entire image with a blur filter applied
    ctx.filter = `blur(${validBlurAmount}px)`;
    // To avoid blurred edges from leaking transparent pixels, we can draw the image slightly larger
    // and clipped, but for simplicity, a standard draw is often sufficient.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Clear the filter for the next drawing operation
    ctx.filter = 'none';

    // 3. Calculate the dimensions of the central, non-blurred area
    const sideWidth = width * (validSideWidthPercentage / 100);
    const centerWidth = width - (2 * sideWidth);

    // 4. Draw the clear, central part of the original image on top of the blurred version
    if (centerWidth > 0) {
        ctx.drawImage(
            originalImg,      // Source image
            sideWidth,        // Source X
            0,                // Source Y
            centerWidth,      // Source Width
            height,           // Source Height
            sideWidth,        // Destination X
            0,                // Destination Y
            centerWidth,      // Destination Width
            height            // Destination Height
        );
    }
    
    // Return the final canvas
    return canvas;
}