How to Rotate an Image using JavaScript

As most know, you can easily rotate an image within just about any image editor for free. However, things start getting a little more complicated if you want to take control of an image rotation operation within your own app/website. Our Image Rotation API makes it easy to include that service in your own image processing application — and you can use it for free when you register a free account on our website (this will yield a limit of 800 API calls per month). With your API key in hand, you can take advantage of ready-to-run code examples provided below in JavaScript to structure your API call.

Get Cloudmersive’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

We can structure our call in two ways — either using the built-in XHR feature of JavaScript, or using jQuery. If you’re using the former option, copy & paste the below code snippet:

var data = new FormData();
data.append("imageFile", fileInput.files[0], "file");
 
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function() {
     if(this.readyState === 4) {
          console.log(this.responseText);
     }
});
xhr.open("POST", "https://api.cloudmersive.com/image/edit/rotate/%3Cdouble%3E/angle");
xhr.setRequestHeader("Apikey", "YOUR-API-KEY-HERE");
xhr.send(data);

For the latter, first install jQuery by running the below command:

bower install jquery

And then call the API like so:

var form = new FormData();
form.append("imageFile", fileInput.files[0], "file");
var settings = {
     "url": "https://api.cloudmersive.com/image/edit/rotate/<double>/angle",
     "method": "POST",
     "timeout": 0,
     "headers": {
          "Content-Type": "multipart/form-data",
          "Apikey": "YOUR-API-KEY-HERE"
     },
     "processData": false,
     "mimeType": "multipart/form-data",
     "contentType": false,
     "data": form
};
$.ajax(settings).done(function (response) {
     console.log(response);
});

After configuring your input, don’t forget to include your API key where it says “YOUR-API-KEY-HERE” for either snippet. After that, you’re all set — no more code required.