Rotate Image Online

Online Free Image Rotator quickly helps rotate the image in seconds without storing data in the browser cache, or not calling any service requests. Atrowel Image Rotator lets you rotate the image clockwise and anticlockwise, every rotation is 90°. It will help you to transform the landscape to a portrait and vice versa. Browse or drag and drop an image from your device, and rotate clockwise or anticlockwise.

How to Rotate the Image using JavaScript?

To rotate the image clockwise or anticlockwise, get the Image object from the uploaded image. Set height and weight and apply the rotate(angle) method with the degree parameter. Finally will get a rotated image with the help of drawImage(...) method.

Below is a sample code to rotate an image 90°.

/* Get Canvas element */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

/* Rotate Image by 90 */
var newWidth  = this.imageObj.height;
var newHeight = this.imageObj.width;
var X = this.imageObj.width * (-1);
var Y = 0;

canvas.setAttribute('width', newWidth);
canvas.setAttribute('height', newHeight);
ctx.rotate(90 * Math.PI / 180);

ctx.drawImage(this.imageObj, X, Y);

Credits

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

ReactJs - A JavaScript library for building user interfaces.