Image Distortion Correction Tool

/**
 * Corrects radial distortion (barrel or pincushion) in an image.
 * This is achieved by remapping pixels based on their distance from a center point.
 *
 * @param {Image} originalImg The original HTML Image object to process.
 * @param {number} strength The strength and direction of the correction.
 *                         Negative values correct barrel distortion (e.g., -0.25).
 *                         Positive values correct pincushion distortion (e.g., 0.25).
 *                         A value of 0 means no correction.
 * @param {number} zoom Zooms into the center of the image to crop out distorted, empty edges.
 *                      A value of 1.0 means no zoom. Values greater than 1 will zoom in.
 * @param {number} centerX The normalized horizontal center of the distortion (0.0 to 1.0).
 * @param {number} centerY The normalized vertical center of the distortion (0.0 to 1.0).
 * @returns {HTMLCanvasElement} A new canvas element with the corrected image.
 */
function processImage(originalImg, strength = -0.25, zoom = 1.0, centerX = 0.5, centerY = 0.5) {
    const w = originalImg.width;
    const h = originalImg.height;

    // Create a source canvas to get pixel data from the original image
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = w;
    sourceCanvas.height = h;
    const sourceCtx = sourceCanvas.getContext('2d', {
        willReadFrequently: true
    });
    sourceCtx.drawImage(originalImg, 0, 0);
    const sourceImageData = sourceCtx.getImageData(0, 0, w, h);
    const sourcePixels = sourceImageData.data;

    // Create a destination canvas to draw the corrected image
    const destCanvas = document.createElement('canvas');
    destCanvas.width = w;
    destCanvas.height = h;
    const destCtx = destCanvas.getContext('2d');
    const destImageData = destCtx.createImageData(w, h);
    const destPixels = destImageData.data;

    // Ensure parameters are numbers
    const fStrength = parseFloat(strength);
    const fZoom = parseFloat(zoom);

    // Distortion center in pixel coordinates
    const cx = w * parseFloat(centerX);
    const cy = h * parseFloat(centerY);

    // Use half of the image diagonal as a radius for normalization.
    // This makes the strength parameter behave consistently across different image sizes and aspect ratios.
    const halfDiagonal = Math.sqrt(w * w + h * h) / 2;
    const radiusSq = halfDiagonal * halfDiagonal;

    // Iterate over each pixel in the destination image
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const destIndex = (y * w + x) * 4;

            // Calculate current pixel's coordinates relative to the center
            // and apply zoom. A higher zoom maps a smaller area of the source to the destination.
            const dx = (x - cx) / fZoom;
            const dy = (y - cy) / fZoom;

            // Calculate the distance squared from the center and normalize it
            const distSq = dx * dx + dy * dy;
            const normalizedDistSq = distSq / radiusSq;

            // Apply the distortion correction formula.
            // This calculates a factor to adjust the radius.
            const correctionFactor = 1.0 + fStrength * normalizedDistSq;

            // Calculate the corresponding source coordinates by applying the correction factor
            const sx = cx + dx * correctionFactor;
            const sy = cy + dy * correctionFactor;

            // Use nearest-neighbor sampling to find the source pixel
            const sx_rounded = Math.round(sx);
            const sy_rounded = Math.round(sy);

            // Check if the source coordinates are within the image bounds
            if (sx_rounded >= 0 && sx_rounded < w && sy_rounded >= 0 && sy_rounded < h) {
                const sourceIndex = (sy_rounded * w + sx_rounded) * 4;
                // Copy the pixel from source to destination
                destPixels[destIndex] = sourcePixels[sourceIndex];
                destPixels[destIndex + 1] = sourcePixels[sourceIndex + 1];
                destPixels[destIndex + 2] = sourcePixels[sourceIndex + 2];
                destPixels[destIndex + 3] = sourcePixels[sourceIndex + 3];
            } else {
                // Fill with transparent if out of bounds
                destPixels[destIndex] = 0;
                destPixels[destIndex + 1] = 0;
                destPixels[destIndex + 2] = 0;
                destPixels[destIndex + 3] = 0;
            }
        }
    }

    // Put the modified pixel data onto the destination canvas
    destCtx.putImageData(destImageData, 0, 0);

    return destCanvas;
}