Image High Resolution Enhancer And Blurriness Remover

/**
 * Enhances an image by increasing its resolution, sharpening details, and boosting color saturation.
 * This function simulates a high-resolution enhancement effect using canvas-based image processing.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} scale The factor by which to increase the image resolution. Default is 2.0 (e.g., 500x500 becomes 1000x1000).
 * @param {number} sharpness The intensity of the sharpening effect. 0 means no sharpening, higher values mean more sharpening. Default is 1.0.
 * @param {number} saturation The amount to boost color saturation. 1.0 is no change, values > 1 increase saturation, < 1 decrease it. Default is 1.2.
 * @returns {HTMLCanvasElement} A new canvas element containing the enhanced image.
 */
function processImage(originalImg, scale = 2.0, sharpness = 1.0, saturation = 1.2) {
    // 1. Validate and cast parameters to numbers
    const scaleFactor = Number(scale) || 2.0;
    const sharpnessAmount = Number(sharpness) || 1.0;
    const saturationAmount = Number(saturation) || 1.2;

    // 2. Create a new canvas to hold the enhanced image
    const canvas = document.createElement('canvas');
    // For performance, hint that we'll be reading from the context frequently
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // 3. Calculate new dimensions and set canvas size
    const newWidth = originalImg.naturalWidth * scaleFactor;
    const newHeight = originalImg.naturalHeight * scaleFactor;
    canvas.width = newWidth;
    canvas.height = newHeight;

    // 4. Draw the original image onto the canvas, upscaled.
    // The browser's built-in scaling algorithm will be used.
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    // Handle cases where the image is empty
    if (newWidth === 0 || newHeight === 0) {
        return canvas;
    }

    // 5. Get the pixel data from the upscaled image
    const imageData = ctx.getImageData(0, 0, newWidth, newHeight);
    const data = imageData.data;

    // --- SHARPENING PASS ---
    // Apply a sharpening convolution kernel if sharpness is greater than 0
    if (sharpnessAmount > 0) {
        // Create a copy of the pixel data to read from, to avoid modifying pixels we still need to read
        const srcData = new Uint8ClampedArray(data);

        // The kernel weights for a 3x3 sharpening filter.
        // It enhances edges by subtracting a fraction of the surrounding pixels from the center pixel.
        const kernel = [
            [0, -sharpnessAmount, 0],
            [-sharpnessAmount, 1 + 4 * sharpnessAmount, -sharpnessAmount],
            [0, -sharpnessAmount, 0]
        ];

        // Iterate over each pixel (excluding a 1px border to avoid edge calculations)
        for (let y = 1; y < newHeight - 1; y++) {
            for (let x = 1; x < newWidth - 1; x++) {
                let r_sum = 0,
                    g_sum = 0,
                    b_sum = 0;

                // Apply the 3x3 kernel
                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        const kernelVal = kernel[ky + 1][kx + 1];
                        if (kernelVal === 0) continue;

                        // Get the pixel data from the source copy
                        const srcIndex = ((y + ky) * newWidth + (x + kx)) * 4;
                        const r = srcData[srcIndex];
                        const g = srcData[srcIndex + 1];
                        const b = srcData[srcIndex + 2];

                        r_sum += r * kernelVal;
                        g_sum += g * kernelVal;
                        b_sum += b * kernelVal;
                    }
                }

                // Write the new, sharpened pixel value to the actual data array
                const dstIndex = (y * newWidth + x) * 4;
                data[dstIndex] = r_sum;
                data[dstIndex + 1] = g_sum;
                data[dstIndex + 2] = b_sum;
            }
        }
    }

    // --- SATURATION PASS ---
    // Adjust color saturation if the amount is not 1.0 (no change)
    if (saturationAmount !== 1.0) {
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Calculate the grayscale (luminance) value of the pixel
            // These are standard coefficients for converting RGB to grayscale
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;

            // Shift the color towards or away from the gray value
            data[i] = gray + saturationAmount * (r - gray);
            data[i + 1] = gray + saturationAmount * (g - gray);
            data[i + 2] = gray + saturationAmount * (b - gray);
        }
    }


    // 6. Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 7. Return the final canvas element
    return canvas;
}