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

 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more
Building a Music Discovery Service

In May 2018, Cloudinary sponsored Capitol Music Group’s first hackathon held by its new Capitol360 Innovation Center, which aims at connecting musicians and software technologists to facilitate and stimulate the creation of music. See this interview for details. As a starter project for the hackathon, we built a sample app called Music Discovery Service.

Read more
Once a Hackathon Participant, Now a Judge

Over the past several years, I've had a chance to participate in hackathons, as part of teams that developed a social payment app and helped users decide meals to cook. But it wasn't until last month that I got to experience a hackathon from the other side, as a judge.

Read more
10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more