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 transform 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

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more