Image Deep Effects Modification Tool

/**
 * Applies various visual effects to a specified rectangular area of an image.
 *
 * @param {Image} originalImg The original Image object, assumed to be fully loaded.
 * @param {string} [effect='blur'] The effect to apply. Supported values: 'blur', 'pixelate', 'grayscale', 'sepia', 'brightness', 'contrast', 'invert', 'saturate', 'hue-rotate'.
 * @param {number} [intensity=10] The strength of the effect. For 'blur', it's pixels. For 'pixelate', it's the block size. For 'hue-rotate', it's degrees. For all others, it's a percentage (0-100+).
 * @param {number} [areaX=0] The x-coordinate of the top-left corner of the area to modify.
 * @param {number} [areaY=0] The y-coordinate of the top-left corner of the area to modify.
 * @param {number|null} [areaWidth=null] The width of the area. If null, it extends to the image's right edge from areaX.
 * @param {number|null} [areaHeight=null] The height of the area. If null, it extends to the image's bottom edge from areaY.
 * @returns {HTMLCanvasElement} A new canvas element with the modified image.
 */
function processImage(originalImg, effect = 'blur', intensity = 10, areaX = 0, areaY = 0, areaWidth = null, areaHeight = null) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height to get the intrinsic size of the image
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 2. Define the target area, using image dimensions as defaults for null width/height
    const finalAreaX = Math.max(0, areaX);
    const finalAreaY = Math.max(0, areaY);
    // Use nullish coalescing operator (??) to handle null values while allowing 0
    const finalAreaWidth = areaWidth ?? (imgWidth - finalAreaX);
    const finalAreaHeight = areaHeight ?? (imgHeight - finalAreaY);
    
    // Clamp dimensions to be within the canvas boundaries
    const clampedWidth = Math.min(finalAreaWidth, imgWidth - finalAreaX);
    const clampedHeight = Math.min(finalAreaHeight, imgHeight - finalAreaY);

    // 3. Draw the original image onto the canvas to serve as the base layer
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 4. Apply the selected effect to the specified region
    const filterEffects = ['blur', 'grayscale', 'sepia', 'brightness', 'contrast', 'invert', 'saturate', 'hue-rotate'];

    if (filterEffects.includes(effect)) {
        // This technique uses the context's filter property combined with a clipping region.
        // It's highly efficient for CSS-like filter effects.
        
        ctx.save(); // Save the current canvas state

        // Create a clipping path for the target rectangle
        ctx.beginPath();
        ctx.rect(finalAreaX, finalAreaY, clampedWidth, clampedHeight);
        ctx.clip(); // All subsequent drawing will be masked by this path

        // Set the filter based on the chosen effect and intensity
        switch (effect) {
            case 'blur':
                ctx.filter = `blur(${intensity}px)`;
                break;
            case 'hue-rotate':
                ctx.filter = `hue-rotate(${intensity}deg)`;
                break;
            default: // grayscale, sepia, brightness, contrast, invert, saturate
                ctx.filter = `${effect}(${intensity}%)`;
                break;
        }

        // Re-draw the original image. The filter and clipping path will only
        // affect this drawing operation, applying the effect to the desired area.
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

        ctx.restore(); // Restore the canvas state, removing the clip and filter

    } else if (effect === 'pixelate') {
        // This effect requires manual pixel manipulation, as it's not a standard filter.
        const blockSize = Math.max(1, Math.round(intensity));
        if (blockSize === 1 || clampedWidth <= 0 || clampedHeight <= 0) {
            return canvas; // Noop if pixelation is not visible or area is invalid
        }

        // Get the pixel data for only the target region for efficiency
        const imageData = ctx.getImageData(finalAreaX, finalAreaY, clampedWidth, clampedHeight);
        const data = imageData.data;

        // Loop through the area in steps of block size
        for (let y = 0; y < clampedHeight; y += blockSize) {
            for (let x = 0; x < clampedWidth; x += blockSize) {
                // Get the color of the top-left pixel of the current block
                const i = (y * clampedWidth + x) * 4;
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];
                const a = data[i + 3];

                // Now, fill the entire block in the imageData buffer with that color
                for (let blockY = y; blockY < y + blockSize && blockY < clampedHeight; blockY++) {
                    for (let blockX = x; blockX < x + blockSize && blockX < clampedWidth; blockX++) {
                        const j = (blockY * clampedWidth + blockX) * 4;
                        data[j] = r;
                        data[j + 1] = g;
                        data[j + 2] = b;
                        data[j + 3] = a;
                    }
                }
            }
        }
        // Put the modified pixel data back onto the canvas at the correct position
        ctx.putImageData(imageData, finalAreaX, finalAreaY);
    }
    // If the effect name is unknown, the function will simply return the canvas
    // with the original image, as no 'if' block will be entered.

    // 5. Return the final canvas element
    return canvas;
}