<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/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 class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> <p>或将照片拖到这里，单次最多可选300张</p> </div> <div class="frame"></div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn_">开始检测</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 class="frame"" + 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 class="frame"" + 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>