HTML5 Face Builder
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/
Opinions expressed by DZone contributors are their own.
Comments