<!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>

javascript face ++的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. A Tour of Go Type conversions

    The expression T(v) converts the value v to the type T. Some numeric conversions: var i int = 42 var ...

  2. 用Quartus II 建立一个工程模板，以后新建工程时无需再配置参数

    以前用Quartus II 每次新建工程时,都要设置工程名,选择工程路径,选择芯片型号等等,好麻烦呀!可不可以建一个工程模板,以后新建工程时直接改相应文件名就可以呀!后来我一琢磨,感觉也不是不可以.因 ...

  3. org.openqa.selenium.remote.SessionNotFoundException: The FirefoxDriver cannot be used after quit() was called.

    该问题已经困扰了我很多天 问题终于解决了,全局变量导致的,碰到这种问题很难再自己本身的机器上发现错误,所以,应该看一下自己写的方法是否涉及到了全局变量出现不一致的情况,让其统一即可.

  4. SQL Server 2000的安全配置

    SQL Server 2000的安全配置 数据库是电子商务.金融连同ERP系统的基础,通常都保存着重要的商业伙伴和客户信息.大多数企业.组织连同政府 部门的电子数据都保存在各种数据库中,他们用这些数据 ...

  5. IOS开发之TableView替换默认的checkmark为自定义图像

    直接上代码: On cellForRowAtIndexPath: UIButton*button =[UIButton buttonWithType:UIButtonTypeCustom];CGRec ...

  6. 获取datagrid中编辑列combobox的value值与text值

    var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed ...

  7. C++ CheckListBox

    实现过程 CCheckListBox    listbox1;     listbox1.AddString("葡萄");     listbox1.AddString(" ...

  8. css z-index详解

    写css z-index的时候经常会出现很多莫名其妙的问题,下面对z-index属性做彻底的剖析,本文参考了<一个css中z-index的用法>,并做了很多demo,方便了解z-index ...

  9. Mac system快捷键

    官方的快捷键是 control+command+F 进行窗口和全屏的切换. 1042282500@qq.com yss12313

  10. quartz源码分析之深刻理解job，sheduler，calendar，trigger及listener之间的关系

    org.quartz包 包org.quartz是Quartz的主包,包含了客户端接口. 其中接口有: Calendar接口: 定义了一个关联Trigger可能(或者不可能)触发的时间空间.它没有定义触 ...