Photo Upscale And Detail Restoration Tool

function processImage(originalImg, scaleFactor = "2", sharpenIntensity = "1.2", blurRadius = "1.5", contrastBoost = "1.05", colorSaturation = "1.1") {
    // Parse parameters to floats
    const scale = parseFloat(scaleFactor) || 2;
    const sharpen = parseFloat(sharpenIntensity) || 1.2;
    const radius = parseFloat(blurRadius) || 1.5;
    const contrast = parseFloat(contrastBoost) || 1.05;
    const saturation = parseFloat(colorSaturation) || 1.1;

    // Calculate upscaled dimensions
    const width = Math.max(1, Math.round(originalImg.width * scale));
    const height = Math.max(1, Math.round(originalImg.height * scale));

    // 1. Create canvas and upscale the image
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Use built-in high-quality interpolation
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Extract original scaled pixel data
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // 3. Create a blurred version of the image for the Unsharp Mask algorithm
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d');

    blurCtx.filter = `blur(${radius}px)`;
    blurCtx.drawImage(canvas, 0, 0);
    const blurredData = blurCtx.getImageData(0, 0, width, height).data;

    // 4. Pixel-by-pixel detail restoration and enhancement loop
    for (let i = 0; i < data.length; i += 4) {
        // Step A: Unsharp Masking (Enhances details & edges)
        // Formula: Output = Original + (Original - Blurred) * SharpenAmount
        let r = data[i]     + (data[i]     - blurredData[i])     * sharpen;
        let g = data[i + 1] + (data[i + 1] - blurredData[i + 1]) * sharpen;
        let b = data[i + 2] + (data[i + 2] - blurredData[i + 2]) * sharpen;

        // Step B: Contrast Adjustment (Restores initial clarity)
        r = (r - 128) * contrast + 128;
        g = (g - 128) * contrast + 128;
        b = (b - 128) * contrast + 128;

        // Step C: Saturation Adjustment (Revives colors)
        // Convert to grayscale equivalent
        const gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;
        
        // Write back to imageData
        // Note: Uint8ClampedArray automatically clamps values between 0 and 255.
        data[i]     = gray + (r - gray) * saturation;
        data[i + 1] = gray + (g - gray) * saturation;
        data[i + 2] = gray + (b - gray) * saturation;
        // Alpha (data[i + 3]) is left completely untouched
    }

    // Apply the manipulated pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}