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.
- CSS
- Canvas
- Dynamic Web TWAIN, a document-scanning SDK
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.
-
Add a hidden
canvas
element to the page.<canvas id="canvasHidden"></canvas> <style> #canvasHidden { display: none; } </style>
-
Add a
select
element to select which flipping method to use.<label> Method: <select id="methodSelect"> <option>CSS</option> <option>Canvas</option> </select> </label>
-
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.
-
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;
-
Get the context of the canvas to perform actions.
const context = canvas.getContext("2d");
-
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); }
-
Use
drawImage
to draw the image content.context.drawImage(image, 0, 0);
-
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:
-
Include Dynamic Web TWAIN in the page.
<script src="https://unpkg.com/dwt@18.4.2/dist/dynamsoft.webtwain.min.js"></script>
-
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
Source Code
You can find all the code and an online demo in the following repo: