Photo Restoration Tool For Blurred Images

/**
 * Restores a blurred image by applying an Unsharp Mask filter.
 * This technique enhances edges and details to create a sharper result.
 * It's a common method for digital photo restoration to combat blur.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {number} amount The strength of the sharpening effect. A value of 0 means no change. 1.0 is a good starting point.
 * @param {number} radius The blur radius for the mask, in pixels. This determines the size of the details that get sharpened.
 * @returns {Promise<HTMLCanvasElement>} A canvas element containing the sharpened image.
 */
async function processImage(originalImg, amount = 1.2, radius = 1.0) {
    // Get the original image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a canvas for the final output
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const outputCtx = outputCanvas.getContext('2d', { willReadFrequently: true });

    // Create a temporary canvas for generating the blurred mask
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d', { willReadFrequently: true });

    // Sanitize parameters to ensure they are non-negative
    const safeAmount = Math.max(0, amount);
    const safeRadius = Math.max(0, radius);

    // --- Step 1: Create the blurred version (the "unsharp mask") ---
    // The CSS filter property on the canvas context is a fast way to apply a Gaussian blur.
    if (safeRadius > 0) {
        blurCtx.filter = `blur(${safeRadius}px)`;
    }
    blurCtx.drawImage(originalImg, 0, 0);
    const blurredImageData = blurCtx.getImageData(0, 0, width, height);

    // --- Step 2: Get the pixel data from the original image ---
    outputCtx.drawImage(originalImg, 0, 0);
    const originalImageData = outputCtx.getImageData(0, 0, width, height);

    // --- Step 3: Apply the sharpening algorithm ---
    // The core formula is: sharpened = original + (original - blurred) * amount
    // We iterate through each pixel and apply this to the R, G, and B channels.
    const originalData = originalImageData.data;
    const blurredData = blurredImageData.data;

    for (let i = 0; i < originalData.length; i += 4) {
        // Red channel
        const r_diff = originalData[i] - blurredData[i];
        originalData[i] = originalData[i] + r_diff * safeAmount;

        // Green channel
        const g_diff = originalData[i + 1] - blurredData[i + 1];
        originalData[i + 1] = originalData[i + 1] + g_diff * safeAmount;

        // Blue channel
        const b_diff = originalData[i + 2] - blurredData[i + 2];
        originalData[i + 2] = originalData[i + 2] + b_diff * safeAmount;

        // The Alpha channel (originalData[i + 3]) is left unchanged.
    }

    // --- Step 4: Draw the new, sharpened pixel data back to the output canvas ---
    // The putImageData function automatically clamps pixel values to the valid 0-255 range.
    outputCtx.putImageData(originalImageData, 0, 0);

    // --- Step 5: Return the canvas with the restored image ---
    return outputCanvas;
}