Please bookmark this page to avoid losing your image tool!

Image Flipping 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.
function processImage(originalImg, flipHorizontal = "true", flipVertical = "false") {
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth and naturalHeight for the intrinsic dimensions of the image.
    // These are 0 if the image is not loaded or is invalid.
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // If the image has no dimensions (e.g., it's not loaded or is an invalid image),
    // set canvas dimensions to 0x0 and return it.
    // Accessing getContext('2d') on a 0-dimension canvas can return null or behave unexpectedly.
    if (w === 0 || h === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the image's dimensions
    canvas.width = w;
    canvas.height = h;

    // Parse string parameters to boolean values.
    // String(param).toLowerCase() === "true" robustly handles various "true" like inputs (e.g., "True", true).
    const doFlipHorizontal = String(flipHorizontal).toLowerCase() === "true";
    const doFlipVertical = String(flipVertical).toLowerCase() === "true";

    let scaleX = 1;
    let scaleY = 1;
    let translateX = 0;
    let translateY = 0;

    // Determine scaling and translation based on flip parameters
    if (doFlipHorizontal) {
        scaleX = -1;        // Flip the X axis
        translateX = w;     // Translate so the flip happens around the image's vertical midline
    }

    if (doFlipVertical) {
        scaleY = -1;        // Flip the Y axis
        translateY = h;     // Translate so the flip happens around the image's horizontal midline
    }

    // Apply transformations
    // 1. Translate the context. This moves the origin (0,0) of the canvas.
    //    If flipping horizontally, origin moves to (width, 0).
    //    If flipping vertically, origin moves to (0, height).
    //    If both, origin moves to (width, height).
    ctx.translate(translateX, translateY);

    // 2. Scale the context. This flips the axes if scale factor is -1.
    //    The scaling happens relative to the new origin set by translate.
    ctx.scale(scaleX, scaleY);
    
    // Draw the image onto the transformed canvas.
    // The image is drawn starting at (0,0) in the *newly transformed* coordinate space.
    // For example, with horizontal flip:
    // - ctx.translate(w, 0) moves origin to canvas right edge.
    // - ctx.scale(-1, 1) inverts x-axis.
    // - ctx.drawImage(originalImg, 0, 0, w, h) draws image:
    //   - Its top-left (0,0) at transformed (0,0) -> canvas (w,0).
    //   - Its top-right (w,0) at transformed (w,0) -> canvas (-w relative to new origin), i.e., (w + w*(-1), 0) = (0,0).
    // This results in the image being drawn flipped.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // The canvas now contains the flipped 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

The Image Flipping Tool allows users to easily flip images either horizontally, vertically, or both. This can be particularly useful for editing images before sharing, creating mirror effects, or adjusting the composition of images for various projects. The tool processes image files and outputs the flipped version, making it suitable for graphic design, social media content creation, and personal photo editing.

Leave a Reply

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