Please bookmark this page to avoid losing your image tool!

Image Editing Tool

(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.
/**
 * A versatile image editing function that applies various filters and transformations.
 * Since the provided description "Kkj" was uninformative, this function provides a
 * set of common image editing capabilities like brightness, contrast, grayscale,
 * sepia, invert, blur, rotation, and flipping.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {number} [brightness=0] Adjusts brightness. Range: -100 to 100. 0 means no change.
 * @param {number} [contrast=0] Adjusts contrast. Range: -100 to 100. 0 means no change.
 * @param {number} [grayscale=0] Converts the image to grayscale. 0 for no effect, 1 for full grayscale.
 * @param {number} [sepia=0] Applies a sepia tone. 0 for no effect, 1 for full sepia.
 * @param {number} [invert=0] Inverts the colors of the image. 0 for no effect, 1 for full inversion.
 * @param {number} [blur=0] Applies a Gaussian blur. Value is the blur radius in pixels.
 * @param {number} [rotate=0] Rotates the image by a given angle in degrees.
 * @param {number} [flipHorizontal=0] Flips the image horizontally. 0 for no flip, 1 for flip.
 * @param {number} [flipVertical=0] Flips the image vertically. 0 for no flip, 1 for flip.
 * @returns {HTMLCanvasElement} A new canvas element with the edited image.
 */
function processImage(
    originalImg,
    brightness = 0,
    contrast = 0,
    grayscale = 0,
    sepia = 0,
    invert = 0,
    blur = 0,
    rotate = 0,
    flipHorizontal = 0,
    flipVertical = 0
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // --- 1. Calculate new canvas dimensions to fit the rotated image ---
    const radians = (rotate * Math.PI) / 180;
    const cos = Math.cos(radians);
    const sin = Math.sin(radians);
    const newWidth = Math.abs(originalWidth * cos) + Math.abs(originalHeight * sin);
    const newHeight = Math.abs(originalWidth * sin) + Math.abs(originalHeight * cos);

    canvas.width = newWidth;
    canvas.height = newHeight;

    // --- 2. Build the CSS filter string ---
    const filters = [];
    // Brightness/Contrast: Map range -100 to 100 into 0% to 200%
    if (brightness !== 0) filters.push(`brightness(${brightness + 100}%)`);
    if (contrast !== 0) filters.push(`contrast(${contrast + 100}%)`);
    // Grayscale/Sepia/Invert: Map 0 or 1 into 0% or 100%
    if (grayscale > 0) filters.push(`grayscale(${grayscale * 100}%)`);
    if (sepia > 0) filters.push(`sepia(${sepia * 100}%)`);
    if (invert > 0) filters.push(`invert(${invert * 100}%)`);
    // Blur: Value is in pixels
    if (blur > 0) filters.push(`blur(${blur}px)`);

    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // --- 3. Apply transformations and draw the image ---
    // Move the origin to the center of the new canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // Apply rotation
    if (rotate !== 0) {
        ctx.rotate(radians);
    }

    // Apply flips
    ctx.scale(flipHorizontal ? -1 : 1, flipVertical ? -1 : 1);

    // Draw the image centered around the new rotated/flipped origin
    ctx.drawImage(originalImg, -originalWidth / 2, -originalHeight / 2, originalWidth, originalHeight);

    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 Editing Tool provides a range of capabilities for transforming and enhancing images. Users can adjust attributes such as brightness and contrast, apply filters including grayscale and sepia, invert colors, or introduce blurring effects. The tool also allows for image rotation and flipping, enabling users to easily customize their images for various applications, such as social media posts, digital marketing materials, or personal projects. The flexibility of editing options makes this tool suitable for both casual users and professionals looking to enhance their images.

Leave a Reply

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