Cloudinary Blog

API for extracting semantic image data - colors, faces, Exif data and more

Extracting Metadata and Exif Data from Images via API
When images are involved, web developers have a large set of relevant tools at their disposal. You can display images in your web sites and mobile applications. You can manipulate and transform such images using image editing and manipulation software or cloud-based solutions like Cloudinary. But there are other types of data embedded in image files that can add unique semantic information to the images and are hardly ever used.
 
Consider what new designs can appear if your graphics designer could assume that only blue themed user uploaded photos will be featured on your homepage. What about featuring only photos that show your users' faces? How about photos taken with new DSLR model cameras rather than older pocket ones? Only photos taken in the GPS vicinity of your website visitor? We believe that such capabilities can offer a new, important tool for web design and development. 
 
Unfortunately, such semantic data is usually locked safely within the images and rarely utilized by developers and designers. We hope that we can change that by introducing a new Cloudinary API that allows you to easily extract rich information regarding your website and mobile application's photos. Using this information you can search, sort and classify your images in amazing new ways.
 

Predominant Colors & Color Histogram

Image search services such as Google Image Search allow you to filter your image search to show only images of a certain color. How is it done? Each image is analyzed and the colors of the images are mapped to one or more leading colors.
 
Cloudinary now supports finding the leading colors of a given image using a standard palette of 12 main colors. Since Cloudinary is a cloud-based service, all image processing is done online and no software installation is required on your side.
 
Finding the predominant colors in an image is also useful for stock-photo sites that wants to allow you to narrow photo searching by colors (see our previous post of how-to quickly build a stock-photo site with Cloudinary) and for e-commerce sites. For example: if you have a fashion site, and you want your users to browse only blue or red shirts.
 
For example, the following image with the public ID 'fashion1' was uploaded to Cloudinary:
 
 
 
Using Cloudinary's Admin API, you can extract the photo's main colors by setting the 'colors' parameter to true (see reference documentation). Here are examples for Ruby, PHP, Node.js and Python:
Cloudinary::Api.resource('fashion1', :colors => true)
$api->resource("fashion1", array("colors" => TRUE));
cloudinary.api.resource('fashion1',  
                        function(result)  { console.log(result) }, { colors: true });
cloudinary.api.resource("fashion1", colors = True)
 
Below is the JSON result of this API call. It seems that the main colors of this image are white (50.7%) and blue (27.8%), with touches of gray and brown. Cool.
{
  "public_id": "fashion1",
  "width": 225,
  "height": 380,
  ...
  "predominant": {
    "google": [
      [ "white", 50.7 ],
      [ "blue",  27.8 ],
      [ "gray", 11.2 ],
      [ "brown", 5.1]
    ]
  }
}
Using this info, you can keep the color mapping in your model and allow clothes to be searched based on colors. Searching for blue clothes should return this product.
 
Another result you get as part of the color information API is a histogram of 32 RGB colors that best represent the image. The following JSON snippet was also included in the result of the API call.
{
  "public_id": "fashion1",
  ...
  "colors": [["#FFFFFF", 50.7], ["#011B43", 5.8], ["#5077A7", 4.9], ["#031235", 4.3], ["#F4CBB4", 3.3], ["#3A6498", 1.9], ["#6284AF", 1.9], ["#2D5E95", 1.9], ["#30578B", 1.8], ["#080918", 1.8], ["#E5B09D", 1.8], ["#36262F", 1.7], ["#264876", 1.6], ["#281A25", 1.5], ["#486A99", 1.4], ["#E3D6CF", 1.4], ["#4D3135", 1.4], ["#07264F", 1.2], ["#664E55", 1.1], ["#6E443C", 1.0]]
}
As you can see, you get RGB format and percentage breakdown of the 32 colors that best represent the image. '#FFFFFF' is white, representing around half of the image, followed by multiple blue shades (e.g., '#011B43' is 5.8%).
 

Face detection info 

Cloudinary supports face detection based cropping and pixelation. Either a single face or multiple faces can be automatically detected. Our API now supports returning additional information regarding the detected faces in an uploaded photo. 
 
Simply set the 'faces' parameter to true in the same method we showed above for 'colors'. Note that you can enable multiple flags in a single call for fetching all information at once. The result includes the exact coordinates of all detected faces, allowing you to easily find out how many faces are available in the photo and their exact positions.
 
The following Ruby command asks for the faces information of the 'fashion1' image:
Cloudinary::Api.resource('fashion1', :faces => true)
Here is the JSON result:
{
  "public_id": "fashion1",
  ...
  "faces": [[99, 21, 64, 87]]
}
 
As you can see, a single face was correctly detected. It is positioned in the 99,21 - 64,87 rectangle of the original image.
 
Same works for images with multiple faces:
 
{
  ...
  "faces":  [ [513, 19, 38, 52], [409, 26, 40, 54], [79, 31, 43, 59], [232, 32, 40, 54], [321, 33, 41, 57], [160, 37, 43, 59], [211, 153, 43, 59], [503, 151, 43, 59], [113, 162, 40, 54], [427, 160, 45, 61], [307, 172, 48, 65] ]
}
Note that face detection does not achieve 100% accuracy. If you need better accuracy, human moderation is recommended.
 

Camera information - Exchangeable image file format (Exif)

**Update March 2017: The exif parameter has been deprecated. The exif data can now be extracted using the image_metadata parameter.
 
Modern digital cameras and smartphones store additional metadata as part of the image files you shoot. Such information includes picture orientation, timestamps, camera model information, photo exposure, GPS location and more.
 
By setting the 'exif' parameter to true, Cloudinary's API can return the image's metadata (see our reference documentation). In the sections above we've shown how to use the Admin API for fetching information of previously uploaded images. You can also request this information while uploading the photos, so it is returned as part of an upload response.
 
For example, the following PHP command uploaded to Cloudinary a photo that was taken by an iPhone 4 in a portrait orientation.
\Cloudinary\Uploader::upload("exif_sample.jpeg", 
   array("public_id" => "exif_sample", "colors" => TRUE, "exif" => TRUE))
 
Here is the JSON of the upload response including the requested Exif and Colors information:
{ 
  "public_id": "exif_sample",
  "width": 2592,
  "height": 1936,
  ...
  "exif": {
    "ApertureValue": "4281/1441",
    "ColorSpace": "1",
    "ComponentsConfiguration": "1, 2, 3, 0",
    "Compression": "6",
    "DateTime": "2010:12:27 11:17:34",
    "DateTimeDigitized": "2010:12:27 11:17:34",
    "DateTimeOriginal": "2010:12:27 11:17:34",
    "ExifImageLength": "1936",
    "ExifImageWidth": "2592",
    "ExifOffset": "204",
    "ExifVersion": "48, 50, 50, 49",
    "ExposureMode": "0",
    "ExposureProgram": "2",
    "ExposureTime": "1/4309",
    "Flash": "24",
    "FlashPixVersion": "48, 49, 48, 48",
    "FNumber": "14/5",
    "FocalLength": "77/20",
    "GPSAltitude": "20723/924",
    "GPSAltitudeRef": "0",
    "GPSImgDirection": "42155/344",
    "GPSImgDirectionRef": "T",
    "GPSInfo": "574",
    "GPSLatitude": "21/1, 768/100, 0/1",
    "GPSLatitudeRef": "N",
    "GPSLongitude": "86/1, 4500/100, 0/1",
    "GPSLongitudeRef": "W",
    "GPSTimeStamp": "17/1, 17/1, 3326/100",
    "ISOSpeedRatings": "80",
    "JPEGInterchangeFormat": "870",
    "JPEGInterchangeFormatLength": "9932",
    "Make": "Apple",
    "MeteringMode": "1",
    "Model": "iPhone 4",
    "Orientation": "6",
    "ResolutionUnit": "2",
    "SceneCaptureType": "0",
    "SensingMethod": "2",
    "Sharpness": "2",
    "ShutterSpeedValue": "4781/396",
    "Software": "4.2.1",
    "SubjectArea": "1295, 967, 699, 696",
    "WhiteBalance": "0",
    "XResolution": "72/1",
    "YCbCrPositioning": "1",
    "YResolution": "72/1"
  },
  "colors":[["#CBC9C5",10.2],["#C4BCB4",9.0],["#1888AB",6.0],["#202618",6.0],["#226391",5.4],["#223A62",4.3],["#B9B4AD",3.8],["#2F88A1",3.5],["#C9C3BA",3.4],["#7492B2",3.4],["#157193",3.1],["#96ABCC",2.9],["#C8B495",2.8],["#4F97AB",2.8],["#484033",2.7],["#669FAD",2.5],["#A0A29E",2.4],["#38A7C8",2.3],["#57A5B7",2.3],["#2D8FAF",2.2],["#ACCADC",2.1],["#073554",2.0],["#60AFC7",2.0],["#1D4A6F",2.0],["#A39477",1.9],["#D1C4A0",1.8],["#296F96",1.7],["#4F6E91",1.5],["#5F5F57",1.4],["#90AECB",1.0]],
  "predominant": {"google":[["teal",41.7],["brown",35.6],["blue",12.1],["green",8.4]]
}
By the way, you can also use Cloudinary's Exif-based automatic rotation by setting the 'angle' parameter ('a' for URLs) to 'exif'. For example:
 
 
 

Summary

With the additional knowledge of image metadata and semantic information, you can enhance your image rich web and mobile applications with little effort, while Cloudinary does all the heavy lifting for you. These additional layers of information adds an important aspect that allows Cloudinary to offer a better than ever cloud-based solution to all your online image management and manipulation needs. 
 
All these new features were requested by Cloudinary's users and we thank all of you for that. We have plenty more ideas for enhancing Cloudinary's capabilities in this area and would love to hear your feedback and suggestions.
 
The ability to fetch Exif, FacesPredominant colors and Color histogram is now available to all of Cloudinary's plans, free and paid. Click here to setup a free Cloudinary account.

Recent Blog Posts

Google Analytics Video Tracking Made Simple

Most web analytics only look at page interactions. But what happens when the major content on your page is a video. You want to know when and how long your users are interacting with your media, when they paused to take a closer look at your media content and when they skipped some content because it wasn’t relevant to them. These - along with a lot of other reasons - are why you should not only analyze open/visits rates, but also drill down in the media content.

Read more
Give your mobile app a boost: pre-upload image processing

As a mobile developer, enabling users to upload images and share them with other users is a very common requirement. When developing those capabilities, we need to take into account that most users won't think twice about uploading the massive images that their high-resolution mobile cameras capture. Those huge files are not only overkill for on-screen display, but can also cause significant slow downs in upload and delivery times. And of course those same users wouldn't think twice about complaining or abandoning our app if their overall user experience wasn't smooth and fast.

Read more
Cloudinary Helps Hinge Keep Modern Romance Real

To create a profile, Hinge users initially had to connect their Facebook and/or Instagram accounts to the app, which would import images to the users’ Hinge profiles. Hinge stored those images with a URL that expired after two months, unless the user logged into the app regularly. This aspect of the app was frustrating for users because the photos would become inaccessible for others to view.

Read more
Building a Smart AI Image Search Tool Using React

In our first article, we built a part of the front-end of our image search tool with the focus mainly on the parent App.js stateful component.

In this article - part two of a series - we will continue developing a Smart Search App, in which users can search for content in an image, not just the description. The app is built with React for UI interaction, Cloudinary for image upload and management and Algolia for search.

Read more