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

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more