在身临其境的全景图像中检测人脸
在身临其境的全景图像中检测人脸
提问于 2016-07-26 22:05:33
是否可以使用jQuery人脸检测插件(我正在使用this)来检测沉浸式360全景图像中的人脸(我已经使用krpano 1.19-pr5 (build 2016-05-24)工具(演示版本)来构建全景文件和用于渲染的krpano html5查看器。你可以从here下载整个包)？
人脸检测插件可以很好地处理简单的2D图像和HTML5画布。krpano查看器还在画布中呈现目标全景平铺。下面是在浏览器中渲染全景图像的html文件的代码。
<!DOCTYPE html>
<html>
<head>
<title>krpano - test_pano_3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
<a href="#" id="try-it">Try It</a>
<script src="test_pano_3.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"test_pano_3.swf", xml:"test_pano_3.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});
</script>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.facedetection.js"></script>
<script>
$(function () {
"use strict";
$('#try-it').click(function (e) {
e.preventDefault();
$('.face').remove();
var canvas = $("#krpanoSWFObject").find("canvas")[0];
$(canvas).faceDetection({
complete: function (faces) {
console.log(faces);
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'face',
'css': {
'position': 'absolute',
'left': faces[i].x * faces[i].scaleX + 'px',
'top': faces[i].y * faces[i].scaleY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
},
error:function (code, message) {
alert('Error: ' + message);
}
});
});
});
</script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2016-08-16 23:10:05
这一点：
var canvas = $("#krpanoSWFObject").find("canvas")[0];不应该工作，因为在KRpano插件中没有实现find。您应该尝试这样做：
var canvas = $("#krpanoSWFObject canvas");返回canvas元素:)
致以敬意，
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38592111
复制相关文章
相似问题
腾讯云开发者
