How to Get Image Metadata (Including EXIF & Resolution) using JavaScript

Image files contain more than just pixels. General metadata about each file (like format and dimensions) help us understand how that file can be used, and EXIF data, if available, can tell us a bit about how the photo was taken. Our Image Metadata API will extract all of this information from an image if it’s available (see below example response), making it easy to utilize and store that information without opening the file.

*Sample Response Model*
{
  "Successful": true,
  "IsValidImage": true,
  "FileFormat": "string",
  "Width": 0,
  "Height": 0,
  "BitDepth": 0,
  "HasTransparency": true,
  "ColorSpace": "string",
  "ExifProfileName": "string",
  "ExifValues": [
    {
      "Tag": "string",
      "DataType": "string",
      "DataValue": "string"
    }
  ]
}

Easily include this API in your app by following instructions below to structure your API call in JavaScript. To use this API, you’ll also need a Cloudmersive API key, which you can get by registering a free account on our website.

Let’s get it going by installing the jQuery library:

bower install jquery

Next up, let’s add our image input snippet:

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

Lastly, let’s call the API with the below code:

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

Just like that, you’ll print key information about the file which can be saved and used however you like.