$(function() {
$.cloudinary.config({ cloud_name: 'christekh', api_key: '874837483274837'})
var uploadButton = $('#upload-button');
var canvas = $('#canvas');
uploadButton.on('click', function(e){
cloudinary.openUploadWidget({ cloud_name: 'christekh', upload_preset: 'idcidr0h'},
function(error, result) {
var id = result[0].public_id;
canvas.html(procesImage(id));
});
});
function procesImage(id){
// Get a random mustache image from
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.
// Movember will be placeed right
// in the middle of the face so we can push
// it down a little bellow 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 movember at the
// down-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);
}
});
<!-- 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 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>
<img src="http://res.cloudinary.com/christekh/image/upload/v1477472034/image_nqsvkq.png" alt="" class="powered">
</div>
</div>
.container{
border: 2px solid #e1e1e1;
width: 70%;
margin: auto;
margin-top: 5em;
text-align: center;
padding-top: 5em;
padding-bottom: 5em;
position: relative;
}
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
text-decoration: none;
outline: none;
border: none;
margin-bottom: 15px;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.powered {
position: absolute;
bottom: 5px;
right: 5px;
}
External resources loaded into this fiddle: