Please bookmark this page to avoid losing your image tool!

Photo Editing Software

(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.
/**
 * Applies various photo editing effects to an image.
 * This function uses the Canvas API's filter property to apply effects like
 * brightness, contrast, saturation, grayscale, etc.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [brightness=100] The brightness of the image in percent. 100 is no change.
 * @param {number} [contrast=100] The contrast of the image in percent. 100 is no change.
 * @param {number} [saturate=100] The saturation of the image in percent. 100 is no change.
 * @param {number} [grayscale=0] The amount of grayscale to apply in percent. 0 is no change.
 * @param {number} [sepia=0] The amount of sepia to apply in percent. 0 is no change.
 * @param {number} [invert=0] The amount of color inversion to apply in percent. 0 is no change.
 * @param {number} [hueRotate=0] The hue rotation to apply in degrees. 0 is no change.
 * @param {number} [blur=0] The blur radius to apply in pixels. 0 is no change.
 * @param {number} [opacity=100] The opacity of the image in percent. 100 is fully opaque.
 * @returns {HTMLCanvasElement} A canvas element with the edited image.
 */
function processImage(
    originalImg,
    brightness = 100,
    contrast = 100,
    saturate = 100,
    grayscale = 0,
    sepia = 0,
    invert = 0,
    hueRotate = 0,
    blur = 0,
    opacity = 100
) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    // Use naturalWidth/Height to get the original image size, not the displayed size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the filter string from the parameters
    // This string follows the CSS filter property syntax
    const filterString = `
        brightness(${brightness}%)
        contrast(${contrast}%)
        saturate(${saturate}%)
        grayscale(${grayscale}%)
        sepia(${sepia}%)
        invert(${invert}%)
        hue-rotate(${hueRotate}deg)
        blur(${blur}px)
        opacity(${opacity}%)
    `.trim().replace(/\s+/g, ' '); // Clean up whitespace

    // Apply the filter to the canvas context
    ctx.filter = filterString;

    // Draw the image onto the canvas. The filter will be applied during this operation.
    ctx.drawImage(originalImg, 0, 0);

    // Return the canvas element, which now contains the edited image
    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

Photo Editing Software is a versatile online tool that allows users to apply a range of effects to their images using simple adjustments. By altering attributes such as brightness, contrast, saturation, grayscale, sepia, color inversion, hue rotation, blur, and opacity, users can significantly enhance and customize their photos. This tool is perfect for photographers, social media enthusiasts, and anyone looking to improve their images for personal or professional use, making it easy to achieve the desired artistic effect.

Leave a Reply

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