If you are a developer, then you already know the importance of working with an image file. It is essential to have tools ready to translate, transform and rotate an image. In this guide, we’ll show you how to apply the JavaScript image rotate function for creating a rotated image about a point.
As an alternative to using HTML and JavaScript, you can also opt for a third-party tool for image transformation. Take, for example, Filestack – a secure and reliable JavaScript file uploader. It also lets you apply translate, scale, rotate, and more transform functions to images.
How To Rotate Images Using HTML and JavaScript Code?
Continue reading to discover how to rotate images using JavaScript. The HTML document we’ll create has the following look:
How Do I Insert An Image Element In HTML?
You can easily insert an image in an HTML file by using the <img> tag and inserting its URL within this tag. The following code shows an example of inserting the Filestack logo to an HTML page:
<img id="filestackImg" src="https://www.filestack.com/img/fs-logo-an-idera-inc-company.svg" width="300"/>The above snippet works for all types of images, including.png,.jpg,.bmp, and more. In the above snippet, the width of the image has been set to 300. You can change the dimensions of the displayed image to any other value.
What Is The CSS Style Transform Rotate Property In CSS?
Every element in HTML has a property associated with it. The CSS allows you to apply these properties to an element. The CSS transform property applies a rotate, scale, and skew to an image. Hence, to rotate an image, you can apply this CSS style transform property. Consider this example:
transform: rotate(90deg)This code will rotate an image by an angle of 90. By varying the angle value, any rotation is possible about the rotation point.
How Do I Rotate An Image Clockwise By A Rotation Angle?
To rotate the images using JavaScript code, all you have to do is change the style.transform property of each image. For example, the following snippet in JavaScript code produces a rotated image about the center point.
img.style.transform = `rotate(${angle}deg)`How Do I Rotate An Image Counterclockwise Using JavaScript?
To rotate images counterclockwise, the code is the same as the one for clockwise rotation. However, you can set the angle to a negative value for counter clockwise rotation.
img.style.transform = `rotate(${angle}deg)`What Is The Consolidated HTML Code To Change CSS Transform Property And Rotate Images Using JavaScript Code?
See the HTML below that adds a clockwise rotate button and a counterclockwise rotate button to an HTML page. Each type of rotation adds 20 degrees to the rotation. Clicking the rotate button will produce the corresponding rotation of the Filestack’s PNG image file.
<!DOCTYPE html>
<html>
<title>Illustration of Javascript Image Rotate</title>
<body>
<button onClick="rotateMyImg(20)"> Rotate by clockwise by 20 degrees</button><br/>
<button onClick="rotateMyImg(-20)"> Rotate by counter clockwise by 20</button>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img id="filestackImg" src="https://www.filestack.com/img/fs-logo-an-idera-inc-company.svg" width="300"/>
<script>
angles = 0;
// the addeventlistener click function of the button elements
function rotateMyImg(increment) {
angles = angles + increment;
if (angles>=360)
angles = 360-angles;
if (angles<0)
angles = 360 + angles;
// get the image element
var img = document.getElementById('filestackImg');
img.style.transform = `rotate(${angles}deg)`;
}
</script>
</body>
</html>The above HTML file achieves the required rotation of images using the CSS transform property. Here are a few points to note about this example:
- The
onClick()function is used to define how the HTML document should react when one of the buttons is clicked. TherotateMyImg()function will be called when one of the buttons is clicked. - The values of the angle are incremented or decremented depending upon clockwise or counterclockwise rotation.
- The
getElementById()gets theimgelement of HTML. Theimg.style.transformapplies the CSS property to the image to rotate it. - The rotation value should be changed to zero every time it is above 360 or below zero, so that the img style transform property has an argument between 0 and 360 inclusive to rotate the image.
What Are The Key Takeaways For A Web Developer Or Software Engineer For JavaScript Image Rotate?
It is easy to create code to transform an image in HTML and JavaScript. The CSS transform property can be used to skew, scale, or rotate an image.
If you are looking for an off-the-shelf solution to instantly and automatically transform any file or image, you can choose Filestack. You can use its photo editor to crop, scale, resize, and rotate the image. You can also flip it or rotate the image upside down. Make it more beautiful by adding a box around it and specifying the border-radius.
Make the most of Filestack, the best JavaScript file upload service and tool for image transforms. Create a free account now. No credit card is required. Go ahead and click this link to start using Filestack.
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.