Image Restoration Tool For Damaged Daguerreotypes

/**
 * Simulates the restoration of a damaged daguerreotype photograph using canvas filters.
 * This function addresses common forms of damage like fading, scratches, and tarnish by
 * applying a sequence of filters to smooth imperfections, enhance contrast, and apply
 * a characteristic monochrome tint.
 *
 * @param {Image} originalImg The original, supposedly damaged, image object.
 * @param {number} repairLevel The amount of smoothing to apply to hide fine scratches, dust, and specks. This corresponds to a blur radius in pixels. Range 0 to 5. Default is 0.5.
 * @param {number} contrastBoost How much to increase the contrast to counteract fading. 1 is no change; values greater than 1 increase contrast. Default is 1.4.
 * @param {number} brightnessBoost How much to increase the brightness to correct for underexposure or fading. 1 is no change. Default is 1.1.
 * @param {number} toningAmount The intensity of the sepia-like toning, characteristic of early photographs. 0 results in a pure grayscale image, while 1 provides a strong sepia tint. Default is 0.3.
 * @param {number} vignetteStrength The intensity of the dark vignette effect around the edges, mimicking old lens characteristics. 0 is no vignette, 1 is a strong vignette. Default is 0.4.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the restored image.
 */
async function processImage(originalImg, repairLevel = 0.5, contrastBoost = 1.4, brightnessBoost = 1.1, toningAmount = 0.3, vignetteStrength = 0.4) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get correct dimensions
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        await new Promise((resolve, reject) => {
            originalImg.onload = resolve;
            originalImg.onerror = reject;
            // Handle case where image is already loaded but flagged as not complete
            if (originalImg.complete) {
                resolve();
            }
        });
    }

    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Sanitize parameters to ensure they are within a reasonable and effective range
    const safeRepairLevel = Math.max(0, Math.min(5, repairLevel));
    const safeContrast = Math.max(0, contrastBoost);
    const safeBrightness = Math.max(0, brightnessBoost);
    const safeToning = Math.max(0, Math.min(1, toningAmount));
    const safeVignette = Math.max(0, Math.min(1, vignetteStrength));

    // The order of canvas filters is crucial for the desired restoration effect.
    // 1. Blur: Smooths out imperfections like dust and fine scratches at the start.
    // 2. Contrast: Enhances the difference between light and dark, which helps to "sharpen"
    //    the slightly blurred edges and restores detail lost to fading.
    // 3. Brightness: Adjusts the overall exposure of the image.
    // 4. Sepia: Applies the final monochrome toning. The sepia filter inherently includes
    //    desaturation, effectively removing any original color tarnish.
    const filterString = [
        `blur(${safeRepairLevel}px)`,
        `contrast(${safeContrast})`,
        `brightness(${safeBrightness})`,
        `sepia(${safeToning})`
    ].join(' ');

    ctx.filter = filterString;

    // Draw the image onto the canvas. The filters are applied during this rendering step.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Add a vignette effect, which was common in daguerreotypes due to lens technology.
    if (safeVignette > 0) {
        // Reset the filter to draw the vignette overlay without being affected by the main filters.
        ctx.filter = 'none';
        
        // Use 'multiply' blend mode to darken the edges. We draw a gradient from white (no effect) to gray (darkening).
        ctx.globalCompositeOperation = 'multiply';
        
        const outerRadius = Math.sqrt(w * w + h * h) / 2;
        const gradient = ctx.createRadialGradient(
            w / 2, h / 2, outerRadius * (1 - safeVignette), // Inner circle radius shrinks as strength increases
            w / 2, h / 2, outerRadius
        );

        gradient.addColorStop(0, 'white'); // Center is white (no darkening)
        gradient.addColorStop(1, 'black'); // Edge is black (full darkening)
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    return canvas;
}