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.

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.