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:

Webinar
How to Optimize for Page Load Speed

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:

Copy to clipboard
npm install cloudinary --save

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

Copy to clipboard
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:

Copy to clipboard
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

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more