How to Flip an Image with JavaScript

Sometimes, we may need to flip a media element in a web app. For example, we may need to flip a video element streaming from a camera to match what we actually see or correct scanned document images that are flipped.

In this article, we are going to talk about three ways to flip an image with JavaScript.

Online demo

Build an HTML5 Page to Flip Images

Create a new HTML5 page with the following template and then let’s add the image flipping function to it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip an Image with JavaScript</title>
  <style>
  </style>
</head>
<body>
  <div class="home">
    <h2>Flip an Image</h2>
    <button id="flipButton">Flip</button>
  </div>
  <script>
  </script>
</body>
</html>

Select Desired Direction

We can flip an image in two directions: horizontal and vertical. We can add a select element to select which direction to use.

<label>
  Direction:
  <select id="directionSelect">
    <option>Horizontal</option>
    <option>Vertical</option>
  </select>
</label>

Load an Image File

Add an input element for selecting files and use a button element to trigger it. The image file will be loaded into an image element.

HTML:

<button id="loadFileButton">Load a File</button>
<input style="display:none;" type="file" id="file" onchange="loadImageFromFile();" accept=".jpg,.jpeg,.png,.bmp" />
<div class="imageContainer">
  <img id="image"/>
</div>
<style>
  .imageContainer {
    overflow: auto;
  }
  #image {
    max-width: 50%;
  }
</style>

JavaScript:

function loadImageFromFile(){
  let fileInput = document.getElementById("file");
  let files = fileInput.files;
  if (files.length == 0) {
    return;
  }
  let file = files[0];
  fileReader = new FileReader();
  fileReader.onload = function(e){
    document.getElementById("image").src = e.target.result;
  };
  fileReader.onerror = function () {
    console.warn('oops, something went wrong.');
  };
  fileReader.readAsDataURL(file);
}

Flip an Image with CSS

We can use the CSS property transform to flip an HTML element like the following:

img.style.transform = "scaleY(-1)"; //flip vertically
img.style.transform = "scaleX(-1)"; //flip horizontally
img.style.transform = "scaleX(-1) scaleY(-1)"; //flip both vertically and horizontally

Here is the code we use in the page to flip the image, which remembers the previous flipping status.

function flipImageWithCSS(){
  let img = document.getElementById("image");
  if (document.getElementById("directionSelect").selectedIndex == 0) {
    if (img.style.transform.indexOf("scaleX") != -1) {
      img.style.transform = img.style.transform.replace("scaleX(-1)","");
    }else{
      img.style.transform = img.style.transform+" scaleX(-1)";
    }
  }else{
    if (img.style.transform.indexOf("scaleY") != -1) {
      img.style.transform = img.style.transform.replace("scaleY(-1)","");
    }else{
      img.style.transform = img.style.transform+" scaleY(-1)";
    }
  }
}

Flip an Image with Canvas

HTML5 provides a canvas element which provides a way to manipulate image data. Unlike CSS which only changes the visual effect, we can use it to actually get a flipped image.

  1. Add a hidden canvas element to the page.

    <canvas id="canvasHidden"></canvas>
<style>
  #canvasHidden {
    display: none;
  }
</style>

  2. Add a select element to select which flipping method to use.

    <label>
  Method:
  <select id="methodSelect">
    <option>CSS</option>
    <option>Canvas</option>
  </select>
</label>

  3. Flip an image with canvas when the selected method is “Canvas”.

    let method = document.getElementById("methodSelect").selectedIndex;
if (method == 0) {
  flipImageWithCSS();
}else if (method == 1){
  document.getElementById("image").style.transform = "";
  flipImageWithCanvas();
}

Details of flipping an image with canvas.

  1. Set the canvas’s size to match the image’s size.

    const image = document.getElementById("image");
const canvas = document.getElementById("canvasHidden");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;

  2. Get the context of the canvas to perform actions.

    const context = canvas.getContext("2d");

  3. Translate the (0,0) to (width,0) and then scale the image using a scaling factor of -1 in the horizontal direction to flip the image horizontally. We can use a similar logic to flip the image vertically.

    if (document.getElementById("directionSelect").selectedIndex == 0) {
  context.translate(width, 0);
  context.scale(-1, 1);
}else{
  context.translate(0, height);
  context.scale(1, -1);
}

  4. Use drawImage to draw the image content.

    context.drawImage(image, 0, 0);

  5. Display the flipped image.

    document.getElementById("image").src = canvas.toDataURL();

Flip an Image with Dynamic Web TWAIN

Dynamic Web TWAIN is a document scanning SDK making it possible to scan documents in the browser. It provides various image processing methods. We can use its Flip and Mirror methods to flip an image.

The advantage of using it is that it can be used to batch process a large volume of images as the processing is done using a native process.

Here are the steps to use it:

  1. Include Dynamic Web TWAIN in the page.

    <script src="https://unpkg.com/dwt@18.4.2/dist/dynamsoft.webtwain.min.js"></script>

  2. Initialize an instance of Web TWAIN and use it to flip the image. You can apply for its license here.

    let DWObject;
Dynamsoft.DWT.AutoLoad = false;
Dynamsoft.DWT.ProductKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
Dynamsoft.DWT.ResourcesPath = "https://unpkg.com/dwt@18.4.2/dist";
   
async function flipImageWithWebTWAIN(){
  if (!DWObject) {
    await initDWT();
  }
  DWObject.RemoveAllImages();
  let response = await fetch(document.getElementById("image").src);
  let buffer = await response.arrayBuffer();
  DWObject.LoadImageFromBinary(buffer,
  function(){
    if (document.getElementById("directionSelect").selectedIndex == 0) {
      DWObject.Mirror(0,
      function(){ //success
        document.getElementById("image").src = DWObject.GetImageURL(0);
      },
      function(errorCode, errorString){ //fail
        console.log(errorString);
      });
    }else{
      DWObject.Flip(0,
      function(){ //success
        document.getElementById("image").src = DWObject.GetImageURL(0);
      },
      function(errorCode, errorString){ //fail
        console.log(errorString);
      });
    }
  },
  function(errorCode, errorString){
    console.log(errorString);
  })
}
   
function initDWT(){
  return new Promise((resolve, reject) => {
    const title = document.querySelector("h2").innerText;
    document.querySelector("h2").innerText = "Loading Dynamic Web TWAIN...";
    Dynamsoft.DWT.CreateDWTObjectEx(
    {
      WebTwainId: 'dwtcontrol'
    },
    function(obj) {
      DWObject = obj;
      document.querySelector("h2").innerText = title;
      resolve();
    },
    function(err) {
      console.log(err);
      document.querySelector("h2").innerText = "Failed to load Dynamic Web TWAIN";
      reject(err);
    }
  );
  })
}

Getting Started With Dynamic Web TWAIN

Dynamic Web TWAIN  

Source Code

You can find all the code and an online demo in the following repo:

https://github.com/tony-xlh/Flip-Image-JavaScript