How to Find Out the Dominant Colors of an Image with JavaScript

Our eyes aren’t always capable of recognizing the full spectrum of colors within an image, and that color information is useful for many image editing operations. When you utilize the Dominant Colors iteration of our Image Processing API, you’ll be able to list the top 5 most prevalent colors in any photo automatically, making it unnecessary to get that information from a 3rd party image editing platform. With code examples provided below, you can easily structure your API call in JavaScript.

Let’s get started by installing the jQuery library. To do so, run the below command:

bower install jquery

Next, let’s copy in the below snippet, which captures our input file for the operation:

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

Now just one more step and you’re done; include the remaining code to call the API and capture your Cloudmersive API key (attainable by registering a free account on our website):

var settings = {
     "url": "https://api.cloudmersive.com/image/get-info/dominant-color",
     "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);
});