javascript face ++

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

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

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

$(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 ++的更多相关文章

JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

如何把jquery 的dialog和ztree结合
第一步:先准备好juqury-ui.ztree 的js文件和css 文件第二步:example.jsp文件代码中写 ..引入jqueryui.ztree 的js和css文件 <body> ...
javascript-智能社-笔记
JavaScript是什么 JavaScript就是修改样式编写JS的流程布局:HTML+CSS 属性:确定要修改哪些属性事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页 ...
.net如何自定义config配置文件节点
本文转载:http://www.cnblogs.com/lori/archive/2013/04/03/2997617.html 对于小型项目来说,配置信息可以通过appSettings进行配置,而如 ...
编写高质量代码改善java程序的151个建议——导航开篇
2014-05-16 09:08 by Jeff Li 前言系列文章:[传送门] 下个星期度过这几天的奋战,会抓紧java的进阶学习.听过一句话,大哥说过,你一个月前的代码去看下,慘不忍睹是吧.确实 ...
13 引用WINAPI
[System.Runtime.InteropServices.DllImport("user32.dll", EntryPoint = "SetWind ...
mongdb使用场景
你期望一个更高的写负载默认情况下,对比事务安全,MongoDB更关注高的插入速度.如果你需要加载大量低价值的业务数据,那么MongoDB将很适合你的用例.但是必须避免在要求高事务安全的情景下使用Mo ...
RHCA学习笔记:RH442-Unit8进程与调度
UNIT 8 Processes and the Scheduler 进程与调度学习目标 A. CPU cache 与Service time之间的关系 B. 分析应用程序使用CPU cach ...
Percona-toolkit的安装和配置-杨建荣的学习笔记
http://blog.itpub.net/23718752/viewspace-2091818/#rd
Linux 下mysql忘记root密码解决方法
忘记root密码怎么办:1.关闭数据库2.使用-->mysqld_safe --skip-grant-tables &--<启动数据库3.使用空密码进入数据库(mysql命令后直接 ...
使用nexus创建maven私有仓库
nexus安装 nexus下载 wget https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.11.1-01-bundl ...

javascript face ++

javascript face ++的更多相关文章

随机推荐

热门专题