Cloudinary Blog

Building A Passport Photo Generator With Cloudinary

Create Passport Size Photos Automatically

Individuals and organizations constantly face a plethora of passport-related issues, ranging from identity theft to impersonations and other vices. As an individual, you could be denied a job or visa just because of a minor noncompliance with the complex requirements for your passport photo. To avoid falling victim to such situations, you need an elaborate measure that ensures that your passport photo meets those requirements without fail.

You must have come across situations in which you tried to upload passport-photo images, only to find that they do not meet the system requirements due to an incorrect background color or poor lighting conditions. In such cases, you’d have had to download an app to help meet the image needs or take another photo. You can now say goodbye to those situations because Cloudinary has your back.

This article shows you how to build a photo generator from an image according to the dimensions you specify with Cloudinary. At the end of the demo, you’ll have created an app that looks like this:

Demo App

Prerequisites

To get started, have the following ready:

  • A Cloudinary developer account. You can sign up for free.
  • A Cloudinary module. See the section on its installation below.

Cloudinary Transformations

As a media-management platform for web and mobile developers, Cloudinary is an end-to-end solution for all your image and video needs. With Cloudinary, you can seamlessly manipulate images without having to figure out the implementation details and infrastructure. Hence why we leverage Cloudinary for this demo.

Note
Have your API credentials ready, which you’ll need as you progress with the demo. To access the API details, go to the Cloudinary console.

Installation of the Cloudinary Module Install the Cloudinary module with the following npm command:

npm install cloudinary --save

Configuration of the Cloudinary Module Next, configure your Cloudinary client for image transformations later on:

const cloudinary = require('cloudinary')
[...]

cloudinary.config({
  cloud_name: "CLOUDNAME",
  api_key: "API_KEY",
  api_secret: "API_SECRET"
});

[...]

Now upload your image with Cloudinary’s image-transformation capabilities, as follows:

app.post((req, ers) => {
  cloudinary.uploader.upload(
    req.files.image,
    {
      transformation: [
        { 
            width: req.body.width, 
            height: req.body.height,
            gravity: "face",
            crop: "thumb"
        }
      ],
      colors: true,
      detection: "adv_face"
    },
    function(err, image) {
        if(err){
            return res.json({ error : " An error occurred during the processing of your image."})
        }

     if (image.info.detection.adv_face.data[0].attributes.smile >= 1) {
        return res.json({ error: "Kindly retake the picture, image rejected because you were smiling" })
      }

        // fetch predominant colors
      let predominant_color = image.predominant.google[0][0];
      let predominant_color2 = image.predominant.google[1][0];
      if( predominant_color == 'white' && predominant_color == 'white' ){
        return res.json({ url: image.url });
      }else{
        return res.json({
          error: "Sorry, your image must have a predominantly white background."
        });  
      }
    }
  );
});

Note the following:

The gravity: “face” parameter means that the face in the image is the center focus of the crop. For details on all the parameters for passing to transformations, see the related Cloudinary documentation.

The colors: true parameter specifies that the background of the image you are uploading is white. Cloudinary returns the image histogram as part of the response, ensuring that the image background is predominantly white. Otherwise, Cloudinary displays an error message with a suggested fix for the issue.

Finally, we included the detection option and set its parameter to adv_face. This is an advanced facial attribute detection add-on by Cloudinary. With this, we now have access to an extensive list of face attributes extracted from the uploaded image. Amongst other attributes detected by this feature is the emotion of the user, and based on that, the image will only be accepted if the user wasn’t smiling.

Conclusion

You’ve now learned how to crop and create a new image that meets your specifications by means of Cloudinary’s custom image-transformation capabilities. To further test out the app, clone the GitHub repository or play with the pen on Codepen.

See the Pen Cloudinary Auto Passport by Chris Nwamba (@codebeast) on CodePen.

For details on Cloudinary’s image-transformation capabilities and other amazing features, see the documentation. If you have any additional questions on how this was built, please comment down below.

Recent Blog Posts

How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more
The New Cloudinary Flexible and Dynamic Website Design

Last month we unveiled a refresh of our website. As with all redesigns, there were numerous drivers behind the rollout. First and foremost, we’re a company that understands the power of visual storytelling, and the ways in which a website must beautifully and clearly convey a brand’s story and offerings. Our website needed to better reflect our brand and our solutions. This post highlights some of the thinking behind our changes.

Read more
Auto-Generate Video Previews with Great Results Every Time

If you are an avid YouTube viewer or a Netflix binger, you might have noticed some fascinating changes in their latest preview thumbnails. They sure are attention grabbing, aren’t they?

Video previews are becoming more and more popular, not the least because they entice viewers, attract clickthroughs and, more often than not, gain a happy and loyal audience. Problem is, the task sounds like an art in itself. Just how can you go about creating appealing video previews without having to rely on movie professionals? Have you ever wished that you could quickly create video previews like those on YouTube and Netflix, but still rest assured that they'll include the good stuff?

Read more