Image Sharpen Filter Tool

/**
 * Applies a sharpen filter to an image.
 *
 * @param {HTMLImageElement} originalImg The original image element. The image must be loaded
 *                                     (i.e., originalImg.complete should be true, or it should have fired 'onload').
 * @param {number} strength The strength of the sharpening effect.
 *                          0.0 means no sharpening (original image is returned).
 *                          1.0 provides a standard amount of sharpening.
 *                          Higher values (e.g., 2.0, 3.0) increase the sharpening effect.
 *                          Negative values will effectively blur the image.
 *                          Default value is 1.0.
 * @returns {HTMLCanvasElement} A new canvas element displaying the sharpened image.
 */
function processImage(originalImg, strength = 1.0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // If strength is 0, no sharpening is needed.
    // Return the canvas with the original image drawn.
    if (strength === 0) {
        return canvas;
    }
    
    // If width or height is 0, there's nothing to process.
    if (width === 0 || height === 0) {
        return canvas;
    }

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const srcData = imageData.data;

    // Create a new ImageData object for the output image
    const outputImageData = ctx.createImageData(width, height);
    const dstData = outputImageData.data;

    // Define the sharpen kernel based on the strength parameter.
    // This kernel enhances differences between a pixel and its immediate neighbors (Laplacian enhancement).
    // P_sharpened = P_original + strength * (P_original - P_blurred_local_average)
    // Approximated by: P_sharpened = P_original + strength * Laplacian(P_original)
    // A common 3x3 Laplacian kernel is:
    //   [ 0,  1,  0 ]
    //   [ 1, -4,  1 ]
    //   [ 0,  1,  0 ]
    // So, if P_out = P_in - strength * Laplacian(P_in), (using negative Laplacian as often defined for sharpening)
    // where Laplacian is [0, -1, 0; -1, 4, -1; 0, -1, 0] (sum of positive weights for neighbors, negative for center)
    // the kernel for P_out will be:
    // P_center_weight = 1 + strength * 4
    // P_neighbor_weight = 0 + strength * (-1) = -strength
    const kernel = [
        [0,           -strength,            0          ],
        [-strength,   1 + 4 * strength,   -strength  ],
        [0,           -strength,            0          ]
    ];
    // The sum of this kernel's elements is (1 + 4*strength) + 4*(-strength) = 1.
    // This ensures that the overall brightness of the image is preserved.

    // Iterate over each pixel of the image (y: rows, x: columns)
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let r_sum = 0;
            let g_sum = 0;
            let b_sum = 0;

            // Apply the convolution kernel to the current pixel
            for (let ky = -1; ky <= 1; ky++) { // Kernel y-offset (-1, 0, 1)
                for (let kx = -1; kx <= 1; kx++) { // Kernel x-offset (-1, 0, 1)
                    const kernelVal = kernel[ky + 1][kx + 1];

                    // Optimize by skipping if kernel value is 0
                    if (kernelVal === 0) {
                        continue;
                    }

                    // Calculate the coordinates of the source pixel (neighbor)
                    // Clamp coordinates to stay within image boundaries (edge handling: extend border pixels)
                    const R_srcX = Math.min(width - 1, Math.max(0, x + kx));
                    const R_srcY = Math.min(height - 1, Math.max(0, y + ky));

                    const srcOffset = (R_srcY * width + R_srcX) * 4; // 4 bytes per pixel (R,G,B,A)

                    // Accumulate weighted-sum for R, G, B channels
                    r_sum += srcData[srcOffset] * kernelVal;
                    g_sum += srcData[srcOffset + 1] * kernelVal;
                    b_sum += srcData[srcOffset + 2] * kernelVal;
                    // Alpha channel is typically not modified by sharpening algorithms
                }
            }

            // Determine the offset for the destination pixel in the output data array
            const dstOffset = (y * width + x) * 4;

            // Set the R, G, B values for the destination pixel, clamped to [0, 255]
            dstData[dstOffset]     = Math.min(255, Math.max(0, r_sum));
            dstData[dstOffset + 1] = Math.min(255, Math.max(0, g_sum));
            dstData[dstOffset + 2] = Math.min(255, Math.max(0, b_sum));
            dstData[dstOffset + 3] = srcData[dstOffset + 3]; // Preserve the original alpha channel
        }
    }

    // Put the processed pixel data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}