在沉浸式全景图像中检测人脸
[英]Detect human faces in an immersive panorama image
问题描述
Is this possible to use a jQuery face-detection plugin (I'm using this ) to detect human faces in an immersive 360 panorama image (I've used krpano 1.19-pr5 (build 2016-05-24) tools (demo version) to build the panorama files and krpano html5 viewer for rendering. You can download the whole package from here )? 
这是可能使用jQuery的脸检测插件（我用这个 ）来检测一种身临其境的360°全景影像的人脸（我用krpano 1.19 PR5（建2016年5月24日），工具（演示版）制作全景图文件和krpano html5查看器进行渲染。您可以从此处下载整个程序包）？
The face-detection plugin works fine with simple 2D images and HTML5 canvases. 面部检测插件可与简单的2D图像和HTML5画布配合使用。 The krpano viewer also renders the target panorama tiles in a canvas. krpano查看器还会在画布中渲染目标全景图块。 Below is the code for the html file that renders the panorama image in browser. 以下是在浏览器中呈现全景图像的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 个解决方案
解决方案1
0 2016-08-16 15:10:05
This: 这个：
var canvas = $("#krpanoSWFObject").find("canvas")[0];
should not work as find is not implemented in KRpano plugin. 应该不起作用，因为KRpano插件未实现find。 You should try this instead: 您应该尝试以下方法：
var canvas = $("#krpanoSWFObject canvas");
that returns the canvas element :) 返回canvas元素:)
Regards, 问候，
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.