Please bookmark this page to avoid losing your image tool!

Image Flip 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.
/**
 * Flips an image horizontally or vertically.
 *
 * @param {HTMLImageElement} originalImg The original image object to be flipped.
 * @param {string} direction The direction to flip the image. Can be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
 * @returns {HTMLCanvasElement} A canvas element with the flipped image.
 */
function processImage(originalImg, direction = 'horizontal') {
  // Create a canvas element
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set the canvas dimensions to match the image
  const width = originalImg.naturalWidth || originalImg.width;
  const height = originalImg.naturalHeight || originalImg.height;
  canvas.width = width;
  canvas.height = height;

  // Save the current canvas state
  ctx.save();

  // Apply the transformation based on the specified direction
  if (direction === 'vertical') {
    // To flip vertically, we translate the canvas down by its height
    // and then scale the y-axis by -1.
    ctx.translate(0, height);
    ctx.scale(1, -1);
  } else {
    // To flip horizontally (default), we translate the canvas to the right by its width
    // and then scale the x-axis by -1.
    ctx.translate(width, 0);
    ctx.scale(-1, 1);
  }

  // Draw the image onto the transformed canvas.
  // The image is drawn at (0,0) in the transformed coordinate space.
  ctx.drawImage(originalImg, 0, 0, width, height);

  // Restore the canvas state to what it was before our transformation
  ctx.restore();

  // Return the canvas with 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 Flip Tool allows users to flip images either horizontally or vertically, providing a quick way to modify an image’s orientation. This tool is useful for various applications, such as creating mirror effects, adjusting images for design purposes, or simply reorienting photos for social media. Users can easily upload an image and choose the desired flip direction to obtain the modified image instantly.

Leave a Reply

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