Image Enhancer

function processImage(originalImg, brightness = 1.05, contrast = 1.1, saturation = 1.15, sharpenAmount = 0.3) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Return empty canvas if image dimensions are invalid
    if (!width || !height) {
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Apply basic color enhancements (Brightness, Contrast, Saturation) using Canvas filters
    // The filter values are multipliers, e.g., 1.05 means 105% (5% increase)
    ctx.filter = `brightness(${brightness}) contrast(${contrast}) saturate(${saturation})`;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Apply Sharpening if requested
    if (sharpenAmount > 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const src = imageData.data;
        const output = ctx.createImageData(width, height);
        const dst = output.data;

        // Custom 3x3 unsharp mask / convolution matrix
        const mix = Number(sharpenAmount);
        const matrix = [
            0,        -1 * mix,      0,
           -1 * mix,   1 + 4 * mix, -1 * mix,
            0,        -1 * mix,      0
        ];

        const side = 3;
        const halfSide = 1;

        // Apply convolution matrix to each pixel
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const dstOff = (y * width + x) * 4;
                let r = 0, g = 0, b = 0;

                for (let cy = 0; cy < side; cy++) {
                    for (let cx = 0; cx < side; cx++) {
                        const scy = y + cy - halfSide;
                        const scx = x + cx - halfSide;

                        // Clamp coordinates to image boundaries for edge pixels
                        const clampedY = Math.max(0, Math.min(scy, height - 1));
                        const clampedX = Math.max(0, Math.min(scx, width - 1));

                        const srcOff = (clampedY * width + clampedX) * 4;
                        const wt = matrix[cy * side + cx];

                        r += src[srcOff] * wt;
                        g += src[srcOff + 1] * wt;
                        b += src[srcOff + 2] * wt;
                    }
                }

                // Assign computed colors. The Uint8ClampedArray handles restricting values between 0-255 natively
                dst[dstOff]     = r;
                dst[dstOff + 1] = g;
                dst[dstOff + 2] = b;
                dst[dstOff + 3] = src[dstOff + 3]; // Preserve original alpha channel
            }
        }
        
        ctx.putImageData(output, 0, 0);
    }

    return canvas;
}