Image Time Stamp Removal Tool

/**
 * Removes a selected rectangular area from an image using a simple inpainting algorithm.
 * It fills the selected area by sampling pixels from its surrounding border.
 * This is effective for removing small objects like timestamps or watermarks from
 * backgrounds that have a somewhat consistent texture (e.g., sky, grass, sand).
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {number} selectionX The x-coordinate of the top-left corner of the area to remove.
 * @param {number} selectionY The y-coordinate of the top-left corner of the area to remove.
 * @param {number} selectionWidth The width of the area to remove.
 * @param {number} selectionHeight The height of the area to remove.
 * @param {number} sampleBorderSize The thickness of the border around the selection to use as the source for replacement pixels.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the selected area removed.
 */
async function processImage(originalImg, selectionX = 10, selectionY = 10, selectionWidth = 100, selectionHeight = 25, sampleBorderSize = 20) {
    
    // Helper function to ensure a value stays within a given range [0, max-1]
    const clamp = (value, max) => Math.max(0, Math.min(Math.round(value), max - 1));

    // Create a new canvas to perform the operations
    const canvas = document.createElement('canvas');
    // For performance with getImageData/putImageData, set willReadFrequently
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    // Draw the original image onto the canvas, this is our working copy
    ctx.drawImage(originalImg, 0, 0);

    // If the selection has no width or height, there's nothing to remove.
    if (selectionWidth <= 0 || selectionHeight <= 0) {
        console.warn("Selection has no area. Returning original image.");
        return canvas;
    }

    // Sanitize selection coordinates to ensure they are within the image bounds
    const startX = clamp(selectionX, w);
    const startY = clamp(selectionY, h);
    const endX = clamp(selectionX + selectionWidth, w);
    const endY = clamp(selectionY + selectionHeight, h);
    const sanitizedWidth = endX - startX;
    const sanitizedHeight = endY - startY;

    // Get the pixel data for the entire canvas
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    // --- Step 1: Collect a pool of valid source pixels ---
    // The source pixels are from the border surrounding the selection.
    const sourcePixelIndices = [];

    // Define the bounding box of the larger area from which we'll sample pixels
    const sourceAreaX1 = clamp(startX - sampleBorderSize, w);
    const sourceAreaY1 = clamp(startY - sampleBorderSize, h);
    const sourceAreaX2 = clamp(endX + sampleBorderSize, w);
    const sourceAreaY2 = clamp(endY + sampleBorderSize, h);
    
    // Iterate over the source area
    for (let y = sourceAreaY1; y < sourceAreaY2; y++) {
        for (let x = sourceAreaX1; x < sourceAreaX2; x++) {
            // Check if the current pixel is OUTSIDE the area to be removed
            const isOutsideSelection = (x < startX || x >= endX || y < startY || y >= endY);
            if (isOutsideSelection) {
                // If it's a valid source pixel, store its starting index in the data array
                const index = (y * w + x) * 4;
                sourcePixelIndices.push(index);
            }
        }
    }

    // If we couldn't find any source pixels (e.g., selection covers the whole image)
    if (sourcePixelIndices.length === 0) {
        console.warn("Could not find any source pixels to sample from. Selection might be too large or border too small.");
        return canvas;
    }

    // --- Step 2: Fill the hole (the selection area) ---
    // Iterate over each pixel within the sanitized selection rectangle
    for (let y = startY; y < endY; y++) {
        for (let x = startX; x < endX; x++) {
            // Pick a random source pixel from our collected pool
            const randomSourceIndex = sourcePixelIndices[Math.floor(Math.random() * sourcePixelIndices.length)];

            // Find the index of the current target pixel we want to replace
            const targetIndex = (y * w + x) * 4;

            // Copy the RGBA values from the random source pixel to the target pixel
            data[targetIndex]     = data[randomSourceIndex];     // Red
            data[targetIndex + 1] = data[randomSourceIndex + 1]; // Green
            data[targetIndex + 2] = data[randomSourceIndex + 2]; // Blue
            data[targetIndex + 3] = data[randomSourceIndex + 3]; // Alpha
        }
    }

    // --- Step 3: Write the modified pixel data back to the canvas ---
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element containing the modified image
    return canvas;
}