How to Adjust Image Contrast using JavaScript

Looking to automatically increase or decrease the contrast within an image? We have you covered with an easy API solution. With our Contrast Adjustment API, you can handle that task by simply setting gamma values along with including your input file. The recommended Gamma setting is 2.0. Anything above 1.0 will increase the contrast, and anything below will decrease it.

To use this API for free, just register a free account on our website (with zero commitments) and you’ll get a limit of 800 API calls per month. Below in this article, I’ll demonstrate how you can structure your API call & include your API key using JavaScript code examples, either via the JS XHR feature or with jQuery.

To make your API call with the XHR feature, use the below code examples:

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/contrast/%3Cdouble%3E/adaptive");
xhr.setRequestHeader("Apikey", "YOUR-API-KEY-HERE");
xhr.send(data);

To use jQuery, first install the library with the following command:

bower install jquery

Then copy in the following code snippet:

var form = new FormData();
form.append("imageFile", fileInput.files[0], "file");
var settings = {
     "url": "https://api.cloudmersive.com/image/edit/contrast/<double>/adaptive",
     "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);
});

Include your API key in the “YOUR-API-KEY-HERE” section of either snippet, and you’re good to go.