Please bookmark this page to avoid losing your image tool!

Image Sharpener For Enhancing Low Quality Photos

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Sharpens an image using a convolution filter (a simplified Unsharp Mask).
 * This works by increasing the contrast along the edges in an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to be sharpened.
 * @param {number} strength A value from 0 upwards that controls the intensity of the sharpening.
 *                          0 means no sharpening. 0.5 is a moderate amount, 1.0 is strong.
 *                          Values greater than 1 can produce harsh, over-sharpened results.
 * @returns {HTMLCanvasElement} A new canvas element displaying the sharpened image.
 */
function processImage(originalImg, strength = 0.5) {
    // Ensure strength is a valid, non-negative number.
    const s = Number(strength);
    if (isNaN(s) || s < 0) {
        strength = 0;
    }

    // Create a canvas element to work with.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the image.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set the canvas size to match the image.
    canvas.width = width;
    canvas.height = height;

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

    // If strength is 0, sharpening is not needed. Return the canvas with the original image.
    if (strength === 0) {
        return canvas;
    }

    // Get the pixel data from the canvas. This is a 1D array of RGBA values.
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create a copy of the original pixel data to read from.
    // This prevents the ongoing calculations from affecting the source pixels for subsequent pixels.
    const srcData = new Uint8ClampedArray(data);

    // The sharpening process uses a 3x3 convolution kernel.
    // We iterate over each pixel, skipping the 1-pixel border to avoid edge issues.
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            // Get the flattened array index for the current pixel (x, y).
            const i = (y * width + x) * 4;

            // Get indices for the neighboring pixels (top, bottom, left, right).
            const top = i - width * 4;
            const bottom = i + width * 4;
            const left = i - 4;
            const right = i + 4;

            // Apply the sharpening kernel to each color channel (R, G, B).
            // The formula is: New = (Center * (1 + 4s)) - (Neighbors * s)
            // This enhances the center pixel's value relative to its neighbors.
            const r = srcData[i] * (1 + 4 * s) - (srcData[top] + srcData[bottom] + srcData[left] + srcData[right]) * s;
            const g = srcData[i + 1] * (1 + 4 * s) - (srcData[top + 1] + srcData[bottom + 1] + srcData[left + 1] + srcData[right + 1]) * s;
            const b = srcData[i + 2] * (1 + 4 * s) - (srcData[top + 2] + srcData[bottom + 2] + srcData[left + 2] + srcData[right + 2]) * s;

            // Assign the new, sharpened pixel values to the output data array.
            // The Uint8ClampedArray will automatically clamp values to the 0-255 range.
            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
            // The alpha channel (data[i + 3]) remains unchanged.
        }
    }

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

    // Return the canvas element.
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Sharpener tool enhances low quality photos by applying a sharpening filter that increases contrast along the edges of the image. Users can adjust the strength of the sharpening effect, ranging from subtle improvements to strong enhancements. This tool is useful for photographers looking to improve the clarity of their images, for graphic designers enhancing visuals for presentations, or for anyone wanting to make their digital images look crisp and well-defined.

Leave a Reply

Your email address will not be published. Required fields are marked *