Join the DZone community and get the full member experience.
Join For Free
this
is another interesting application of html5. today i have developed a
little ‘toy’. this little toy can be enhanced into something big.
welcome to test new html5 tool – face builder (canvas). this tool will
allow your members (visitors) to compose their faces, you can select
through predefined elements (face, eyes, nose, mouth), and in end – you
can ‘export’ result into image (like crop tool).
here are our demo and downloadable package:
live demo
download in package
ok, download the source files and lets start coding !
step 1. html
small code with canvas element and blank image (for future exported image)
index.html
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>html5 face builder | script tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
<h2>html5 image crop tool</h2>
<a href="http://www.script-tutorials.com/html5-face-builder/" class="stuts">back to original tutorial on <span>script tutorials</span></a>
</header>
<div class="container">
<canvas id="scene" width="500" height="500"></canvas>
<div id="results">
<h2>use arrow keys to select your face details (up-down to select category, left-right to switch them), then click spacebar to export as image.</h2>
<img id="face_result" />
</div>
</div>
</body>
</html>
step 2. html5 js
js/script.js
// inner variables
var canvas, ctx;
var ohead, oeye, onose, omouth;
var isel = 0;
// -------------------------------------------------------------
// objects :
function head(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.ispr = 0;
}
function eye(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.ispr = 0;
}
function nose(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.ispr = 0;
}
function mouth(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.ispr = 0;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawscene() { // main drawscene function
clear(); // clear canvas
// draw head
ctx.drawimage(ohead.image, ohead.x2 + ohead.ispr*ohead.w, ohead.y2, ohead.w, ohead.h, ohead.x, ohead.y, ohead.w, ohead.h);
// draw eyes
ctx.drawimage(oeye.image, oeye.x2 + oeye.ispr*oeye.w, oeye.y2, oeye.w, oeye.h, oeye.x, oeye.y, oeye.w, oeye.h);
// draw nose
ctx.drawimage(onose.image, onose.x2 + onose.ispr*onose.w, onose.y2, onose.w, onose.h, onose.x, onose.y, onose.w, onose.h);
// draw mouth
ctx.drawimage(omouth.image, omouth.x2 + omouth.ispr*omouth.w, omouth.y2, omouth.w, omouth.h, omouth.x, omouth.y, omouth.w, omouth.h);
// draw controls
ctx.textalign = 'center';
ctx.fillstyle = '#000';
ctx.font = '30px verdana';
if (isel == 0)
ctx.font = 'bold 30px verdana';
ctx.filltext('< head >', 400, 80);
ctx.font = '30px verdana';
if (isel == 1)
ctx.font = 'bold 30px verdana';
ctx.filltext('< eye >', 400, 180);
ctx.font = '30px verdana';
if (isel == 2)
ctx.font = 'bold 30px verdana';
ctx.filltext('< nose >', 400, 280);
ctx.font = '30px verdana';
if (isel == 3)
ctx.font = 'bold 30px verdana';
ctx.filltext('< mouth >', 400, 380);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getelementbyid('scene');
ctx = canvas.getcontext('2d');
// initialization of dragon
var oheadimage = new image();
oheadimage.src="images/image.png";
oheadimage.onload = function() {};
ohead = new head(0, 0, 0, 755, 300, 405, oheadimage);
oeye = new eye(40, 70, 0, 120, 235, 80, oheadimage);
onose = new nose(70, 120, 0, 276, 180, 140, oheadimage);
omouth = new mouth(60, 260, 0, 546, 170, 120, oheadimage);
$(window).keydown(function(event){
switch (event.keycode) {
case 38: // up key
isel--;
if (isel < 0) {
isel = 3;
}
break;
case 40: // up key
isel++;
if (isel >= 4) {
isel = 0;
}
break;
case 37: // left key
// update sprite positions
if (isel == 0) {
ohead.ispr--;
if (ohead.ispr < 0) {
ohead.ispr = 3;
}
}
if (isel == 1) {
oeye.ispr--;
if (oeye.ispr < 0) {
oeye.ispr = 4;
}
}
if (isel == 2) {
onose.ispr--;
if (onose.ispr < 0) {
onose.ispr = 4;
}
}
if (isel == 3) {
omouth.ispr--;
if (omouth.ispr < 0) {
omouth.ispr = 4;
}
}
break;
case 39: // right key
// update sprite positions
if (isel == 0) {
ohead.ispr++;
if (ohead.ispr >= 4) {
ohead.ispr = 0;
}
}
if (isel == 1) {
oeye.ispr++;
if (oeye.ispr >= 5) {
oeye.ispr = 0;
}
}
if (isel == 2) {
onose.ispr++;
if (onose.ispr >= 5) {
onose.ispr = 0;
}
}
if (isel == 3) {
omouth.ispr++;
if (omouth.ispr >= 5) {
omouth.ispr = 0;
}
}
break;
case 32: // spacebar key - export results
var temp_ctx, temp_canvas;
temp_canvas = document.createelement('canvas');
temp_ctx = temp_canvas.getcontext('2d');
temp_canvas.width = 360;
temp_canvas.height = 410;
// draw head
temp_ctx.drawimage(ohead.image, ohead.ispr*ohead.w, ohead.y2, ohead.w, ohead.h, ohead.x, ohead.y, ohead.w, ohead.h);
// draw eyes
temp_ctx.drawimage(oeye.image, oeye.ispr*oeye.w, oeye.y2, oeye.w, oeye.h, oeye.x, oeye.y, oeye.w, oeye.h);
// draw nose
temp_ctx.drawimage(onose.image, onose.ispr*onose.w, onose.y2, onose.w, onose.h, onose.x, onose.y, onose.w, onose.h);
// draw mouth
temp_ctx.drawimage(omouth.image, omouth.ispr*omouth.w, omouth.y2, omouth.w, omouth.h, omouth.x, omouth.y, omouth.w, omouth.h);
var vdata = temp_canvas.todataurl();
$('#face_result').attr('src', vdata);
break;
}
});
setinterval(drawscene, 40); // loop drawscene
});
most of code is already commented. so i will hope that you will understand all this code. if not – you always can ask me any related questions.
source: http://www.script-tutorials.com/html5-face-builder/
HTML
Opinions expressed by DZone contributors are their own.
Comments