Applying artistic facial effects to images on the fly
Ever wished you could add snapchat like effects on your images?
Good news is, you actually don’t need extensive training or specific face detection skills to get started. All you need is Cloudinary. Cloudinary is a cloud-based image management solution that gives you the power to upload, store, manipulate, optimize and deliver images. It also enables you to apply advanced effects and filters using if/else conditions, like the one we are going to use today.
In this article, you will learn how to apply face effects, by adding a Movember mustache using Cloudinary’s conditional transformation feature:
Image with a face
Image without a face (mustache is added down-right)
Getting started
Before you see some codes, we should do some housekeeping so we can move ahead smoothly. Our demo will be built using JavaScript. Before we start, we will need to set up a Cloudinary account, which gives us enough free storage and transformation capabilities.
The Cloudinary account
Our Cloudinary account will enable us to upload, store and access our images via the API. You can sign up for a free account, then store your credentials in a safe place. The credentials are stored on the dashboard as shown:
Project setup
As mentioned earlier, we will have a demo, so you can better envision how Cloudinary works and have a practice playground.
The project structure is going to be a very simple one, with just a server and three client files:
|---movember
|-------index.html # Home page
|-------script.js # JavaScript here
|-------style.css # CSS hereWe need to include jQuery, Cloudinary upload widget and Cloudinary jQuery library in our HTML:
<!-- ./index.html -->
<html>
<head>
<title>Get a Momember</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Content will go here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.cloudinary/1.0.18/jquery.cloudinary.js' type='text/javascript'></script>
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
<script src="script.js"></script>
</body>
</html>- widget.cloudinary – loads the upload widget to our document and includes other supporting functionalities.
- jquery.cloudinary – is jQuery plugin that serves as an SDK tool for managing and manipulating cloud images.
The jQuery library is imported first because the Cloudinary jQuery plugin, and our own custom script.js file will depend on it.
Configuring Cloudinary
Cloudinary configuration is easy. We just call the .config method and pass it the credentials we copied from the dashboard:
$(function() {
// ./script.js
// ......
// Configure Cloudinary
// with credentials available on
// your Cloudinary account dashboard
$.cloudinary.config({ cloud_name: 'CLOUD_NAME', api_key: 'API_KEY'});
})Be careful with the API_SECRET (which must not be used in client-facing applications)! Any user that has the credentials has access to your image cloud.
Image Upload
Images will be sent to Cloudinary via Ajax request using the upload widget. We can initiate this request from the markup, so let’s create some:
<!-- ./html -->
<!-- Container for both form and loader -->
<div class="container" id="container">
<h1>Movember</h1>
<div class="content">
<p>Upload a selfie to get a mustache for free!</p>
<!-- Upload Face button -->
<button id="upload-button" class="btn">Take or Upload a Selfie</button>
<div class="paint_container" id="canvas">
<!-- Canvas to drop image after processing -->
</div>
</div>
</div>Our markup just has 2 significant elements: a button to open the upload widget for selfies, and a canvas to drop the image once the upload is successful.
We could also add minimal style to pull everything to the center of the page:
// ./style.css
.container{
border: 2px solid #e1e1e1;
width: 40%;
margin: auto;
margin-top: 5em;
text-align: center;
padding-top: 5em;
padding-bottom: 5em;
}
/* Button style truncated for brevity */Once you run/open the application, your app should look like the following:
Upload with Cloudinary widget
The Cloudinary widget has been setup and loaded in our browser. Let’s see how we can use it to initiate an upload:
// ./script.js
$(function(){
// Upload button
var uploadButton = $('#upload-button');
// Upload button event
uploadButton.on('click', function(e){
// Initiate upload
cloudinary.openUploadWidget({ cloud_name: 'CLOUD_NAME', upload_preset: 'PRESET'},
function(error, result) {
if(error) console.log(error);
// If NO error, log image data to console
console.log(result);
});
});
});The widget library exposes cloudinary which has an openUploadWidget property. This property takes a config and a callback function to handle upload success or failure.
The config requires the cloud name to upload to and an upload preset. The upload preset is just a pre-configuration to what we could have been setting up via parameters in the REST URLs. We set this configuration and using a unique ID to differentiate them from each other. To set yours, go to Settings >> Upload Tab >> Upload Presets >> Enable. You can read more about it here.
Once you have this wired, you can click the upload button:
Select an image and upload. Open up the developer tool and have a look at the console tab. You would see an array with an item containing the image details.
Information logged to the console is not very useful. Let’s drop the image in the browser.
Apply the face effect with conditional transformation
Before we jump to the exciting part, let’s grab a reference to the canvas where we will be putting the image.
// ./script.js
var canvas = $('#canvas');Now, the next time we want to upload, we will put the image right into the document:
uploadButton.on('click', function(e){
cloudinary.openUploadWidget({ cloud_name: 'CLOUD_NAME', upload_preset: 'UPLOAD_PRESET'},
function(error, result) {
if(error) console.log(error);
var id=result[0].public_id;
canvas.html(procesImage(id))
});
});The processImage method just returns an image from your cloud:
function processImage(id){
var options = {/* Transformation option can go here */};
return $.cloudinary.image(id, options);
}Next up is the long awaited part. Let’s add a mustache to the face.
To do so, we need to extend our processImage function by adding transformation property to the options. The transformation property is where we tell Cloudinary that we would love to get a mustache.
function procesImage(id){
// Get a random mustache image
var movembers = ["movember3_oabbz1", "movember2_mc2zrb", "movember_qimgkg"];
var random = Math.floor(Math.random() * movembers.length);
var randomMovember = movembers[random];
var options = {
// Transformation option
transformation:
[
// Specify desired width
{width: 400},
// Check if faces (if faces >= 1)
{if: "faces_gte_1"},
// Add movember image.
// Mustache will be placed right
// in the middle of the face so we can push
// it down a little below the nose
{overlay: randomMovember, width: 1.1, flags: "region_relative", gravity: "faces", x:0, y:50},
// If the image is not a face
{if: "else"},
// drop the mmustache at the
// lower-right section of the image
{overlay: randomMovember, width: 100, gravity: "south_east"},
// End if statement
{if: "end"},
// Add a border and a border-radius
{border: "7px_solid_grey", radius: 30}
]
};
// Return image with the options
// Image is returned in an image tag
// and not as a URL
return $.cloudinary.image(id, options);
}An important part is the transformation array, because some of its values are used to make decisions and apply the mustache to the uploaded image. If the image contains no face, the mustache will be placed at the bottom-right of the image.
To make the app more interesting, we get a random mustache from our cloud storage, rather than just using single mustache. When we set gravity to faces, in order to apply the mustache to all faces, the mustache will end up at the center of the faces rather than below the nose. For this reason, we use the y property to push the mustache down a little.
Conclusion
In this example, we focused on a particular aspect applying effects and filters using face detection and if/else statements. There are many other amazing conditional transformations you can do with Cloudinary. Feel free to read more and explore what options Cloudinary has for you.
[— This is a sponsored post on behalf of Cloudinary –]
| Hot Autumn Stuff Collection of 50+ Fonts & 300 Graphic Objects – only $17! |
