你的位置:首页 > Java教程

[Java教程]javascript face ++


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html>

<head>
<meta charset="utf-8">
<title>Face++ JavaScript SDK</title>
<script type="text/javascript">
function addViewPort() {
var phoneWidth = parseInt(window.screen.width),
phoneScale = phoneWidth / 640,
ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
// andriod 2.3
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
// andriod 2.3以上
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
// 其他系统
} else {
//document.write('<meta name="viewport" content="width=640, initial-scale=0.5, maximum-scale=0.5,user-scalable=no">');
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
}
}
addViewPort();
</script>
<link href="js/webuploader/webuploader.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="js/style.css" />
<!-- 载入依赖库 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/facepp-sdk.min.js"></script>
<script type="text/javascript">
// 应用的JavaScript代码
</script>
<style>
.webuploader-container {
position: relative;
width: 80%;
text-align: center;
left: 10%;
}

#filePicker2,
#uploader .statusBar .info {
display: none;
}

#uploader .queueList {
position: relative;
}

#uploader .statusBar .btns .uploadBtn_ {
background: #00b7ee;
color: #fff;
border-color: transparent;
border: 1px solid #cfcfcf;
padding: 0 18px;
display: inline-block;
border-radius: 3px;
margin-left: 10px;
cursor: pointer;
font-size: 14px;
float: left;
}

#uploader .filelist li,
#uploader .filelist li p.imgWrap {
width: 300px;
height: 300px;
}

.frame {
z-index: 10;
position: absolute;
}
.frame .male{
background:url(image/gender.png) no-repeat 0 0;
width: 50px;
height: 65px;
position: absolute;
top: -38px;
left: -30px;
}
.frame .Female{
background:url(image/gender.png) no-repeat -55px 0;
width: 50px;
height: 65px;
position: absolute;
top: -38px;
left: -30px;
}
</style>
</head>

<body>

<pre id="response"></pre>
<div id="wrapper">
<div id="container">
<!--头部,相册选择和格式选择-->

<div id="uploader">
<div >
<div id="dndArea" >
<div id="filePicker"></div>
<p>或将照片拖到这里,单次最多可选300张</p>
</div>
<div ></div>
</div>
<div >
<div >
<span >0%</span>
<span ></span>
</div>
<div ></div>
<div >
<div id="filePicker2"></div>
<div >开始检测</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/webuploader/webuploader.min.js"></script>

<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$.ajax({
url: "http://192.168.199.136:801/php/index.php/Home/Tags/dian",
dataType: "json",
type: "post",
success: function(data) {
console.log(data);
}
});
$(document).on("click", "#uploader .statusBar .btns .uploadBtn_", function() {
var image = $('#uploader .filelist li p.imgWrap img').attr('src');
var url_ = "http://weixin.gypserver.com/laura_test/Upload/photos/";
$.ajax({
url: "/laura_test/index.php/Home/Tags/upload",//php写的图片data:64保存图片
data: {
"img": image
},
dataType: "json",
type: "post",
success: function(data) {
console.log(0);
if (data.code == 1) {
var file = data.file;
var api = new FacePP('1e5b3ab481d0caba1c2205851df45411', 'S31T02cC-rh8W0oPU_iyjPaIGRW5OvX1');
api.request('detection/detect', {
url: url_ + file
}, function(err, result) {
if (err) {
// TODO handle error
$('#response').text('载入失败');
return;
}
//console.log("age"+result.face[0].attribute.age.value);
// document.getElementById('response').innerHTML = JSON.stringify(result, null, 2);
//console.log(result.face.length);
if (result.face.length>0) {
var html_ = "";
for (var i = 0; i < result.face.length; i++) {
var x1 = result.face[i].position.center.x * result.img_width / 100 - result.face[i].position.width * result.img_width / 200;
var y1 = result.face[i].position.center.y * result.img_height / 100 - result.face[i].position.height * result.img_height / 200;
var img_w = result.face[i].position.width * result.img_width / 100;
var img_h = result.face[i].position.height * result.img_width / 100;
if (result.face[i].attribute.gender.value == "Male") {
html_ = "<div " + i + "><div class='male' style='background:url(image/gender.png) no-repeat 0 0'></div><span>" + result.face[i].attribute.age.value + "</span></div>";
} else {
html_ = "<div " + i + "><div class='Female'></div><span>" + result.face[i].attribute.age.value + "</span></div>";
}

$('.frame').append(html_);
$('.frame .frame' + i).css({
'width': img_w,
'height': img_h,
'top': y1,
'left': x1,
'display': 'block',
'border': '1px solid #fff',
'position': 'absolute'
});
$('.frame .frame' + i + ' span').css({
'font-size': '40px',
'font-weight': 'bold',
'color': '#FF9800',
'position': 'absolute',
'top': '-38px',
'left': img_w / 2 - 20

});

}
}else{
alert('换张图片试试吧~');
location.reload();
}
});

}
}
});
});

});
</script>
</body>

</html>