How to Convert an Image to Black & White Grayscale with JavaScript

Social media has proliferated the use of photo filters — and the good news is those filters are easy to incorporate into your website with the right API. With our Black & White Filter API, you can empower your website patrons to easily create an interesting aesthetic for their uploaded images by removing color entirely. To take advantage of this API, first create a free account on our website to receive your API key, then follow instructions below to structure your API call with complementary JavaScript code examples.

First things first, let’s run the below command to install the jQuery library:

bower install jquery

Next, include the below snippet (your image file goes here):

var form = new FormData();
form.append("imageFile", fileInput.files[0], "file");

Then, to finish up, include the remaining code below:

var settings = {
     "url": "https://api.cloudmersive.com/image/filter/black-and-white",
     "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);
});

Done — easy as pie. With your Cloudmersive API key, you’ll gain access to dozens of other Cloudmersive utility APIs for image processing, security, and much more.