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的动 ...

随机推荐

NSAutoreleasePool' is unavailable: not avail
NSAutoreleasePool' is unavailable: not available in automatic reference counting mode 这我就纠结了,对着书敲都出问 ...
Error In Work
ReferenceError: BAD_REQUEST is not defined MyBatis配置错误,比如$!conflict.id,写成conflict.$!id
使用dispatch_once：创建单列
无论是爱还是恨,你都需要单例.实际上每个iOS或Mac OS应用都至少会有UIApplication或NSApplication. 什么是单例呢?Wikipedia是如此定义的: 在软件工程中,单例是 ...
spring mvc[转]
Spring 注解学习手札(一) 构建简单Web应用 Spring 注解学习手札(二) 控制层梳理 Spring 注解学习手札(三) 表单页面处理 Spring 注解学习手札(四) 持久层浅析 Spr ...
java程序查不出数据来
同样的错误,不可再犯第三次!!! 数据库中是char,里面带空格,但在pl/sql中这样写可以查出来.如下: select ipostid from product t where ipostid= ...
PERCONA-TOOLKIT : pt-ioprofile分析IO情况
针对IO密集型应用做系统调优的时候,我们通常都需要知道系统cpu 内存 io 网络等系统性能和使用率,结合应用本身的访问量,以及 mysql的性能指标来综合分析.比如说:我们将系统压力情况分为 ...
phpcms 源码分析五：文件缓存实现
这次是逆雪寒的文件缓存实现代码分析: /* [/php] PHPCMS的文本缓存实现: [php] <?php /* 这个文件里面全是有关生成文本缓存的函数.文本缓存是个好东西.一般的项目,我们 ...
iOS之KVO和KVC
概述由于ObjC主要基于Smalltalk进行设计,因此它有很多类似于Ruby.Python的动态特性,例如动态类型.动态加载.动态绑定等.今天我们着重介绍ObjC中的键值编码(KVC).键值监听( ...
udp开发-dtd验证,dom解析
//博主太懒了,并没有提供范例程序 6.基于UDP开发 (1)发送方:socket->准备数据包 DatagramSocket docket = new DatagramSocket(); // ...
selendroid项目实战教程1
selendroid是国内使用非常少的框架.资料也少.刚好公司项目用到,给大家分享下,技术不太行,有错误还望指正. 使用selendroid契机,是公司开发的APP,需要大量捕捉Toast信息.公司的 ...

javascript face ++

javascript face ++的更多相关文章

随机推荐

热门专题