face2face_HTML5 Face Builder
2020-08-04 04:49
267 查看
face2face
HTML5 Face Builder tutorial. 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).
HTML5 Face Builder教程。 这是HTML5的另一个有趣的应用程序。 今天，我开发了一个小“玩具”。 这个小玩具可以做成大东西。 欢迎测试新HTML5工具– Face Builder(画布)。 使用此工具，您的成员(访客)可以构成自己的面Kong，可以通过预定义的元素(面Kong，眼睛，鼻子，嘴巴)进行选择，最后，您可以将结果“导出”到图像中(例如裁剪工具)。
Here are our demo and downloadable package:
这是我们的演示和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the source files and lets start coding !
好的，下载源文件并开始编码！
步骤1. HTML (Step 1. HTML)
Small code with canvas element and blank image (for future exported image)
带画布元素和空白图像的小代码(用于将来导出的图像)
index.html (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="https://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>
<!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="https://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>[/code]
第2步。HTML5JS (Step 2. HTML5 JS)
js / script.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
});// 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
});
[/code]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.
大多数代码已被注释。 因此，我希望您能理解所有这些代码。 如果不是，您总是可以问我任何相关问题。
现场演示
结论 (Conclusion)
Welcome back to read something new and interesting about HTML5. Good luck in your projects.
欢迎回来阅读有关HTML5的新知识。 在您的项目中祝您好运。
face2face
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Face detection using HTML5
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV
- 开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室
- Face2Face: Real-time Face Capture and Reenactment
- Face2Face: Real-time Face Capture and Reenactment of RGB Videos 论文翻译
- Face2Face: Real-time Face Capture and Reenactment of RGB Videos
- 推荐10款非常优秀的 HTML5 开发工具
- 【翻译】使用HTML5写游戏：第一步
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- 今天我发现了一个网站有很多的html5手机wap网站模板，在这里分享一下
- html5 file slice()对文件进行分块，实现断点上传
- HTML5新控件 - url类型输入框（网址）
- 国内HTML5前端开发框架汇总
- html5 填表 表单 input output 与表单验证
- 人脸识别系列（十七）：ArcFace/Insight Face
- HTML5 开发者需要了解的技巧和工具汇总
- 改善HTML5 Canvas的性能
- HTML5 Web app开发工具Kendo UI Web教程：如何配置Kendo UI Calendar