Mirror Image online

Online Free Image Flipper quickly helps mirror the image in seconds without storing data in the browser cache, or not making any server requests. Atrowel Image Flipper lets you mirror the image horizontally or vertically. Browse or drag and drop an image from your device, and flip horizontally or vertically.

How to Flip / Mirror the Image using JavaScript?

To Flip image in JavaScript, CanvasRenderingContext2D.setTransform() method will help scale, rotate, and mirror the image.

Read the uploaded image and create an img component using the Image() constructor. With the help of canvas methods we can mirror the Image.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = URL.createObjectURL(uploadFile);

Below is a sample code to flip an image horizontally.

var horizontal = true; //To flip horizontally
var vertical = false;   //To flip vertically
var x = 0, y = 0;

ctx.setTransform(
  horizontal ? -1 : 1, 0, // set the direction of x axis
  0, vertical ? -1 : 1,   // set the direction of y axis
  x + horizontal ? image.width : 0, // set the x origin
  y + vertical ? image.height : 0   // set the y origin
);

OR

ctx.translate(this.imageObj.width, 0);
ctx.scale(-1, 1);

/* Drow flip image in canvas */
ctx.drawImage(this.imageObj, 0, 0);

Credits

HTML Canvas element - is used to draw graphs on a website.

ReactJs - A JavaScript library for building user interfaces.