Detect human faces in an immersive panorama image
Question
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 )?
The face-detection plugin works fine with simple 2D images and HTML5 canvases. The krpano viewer also renders the target panorama tiles in a canvas. Below is the code for the html file that renders the panorama image in browser.
<!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 answers
solution1
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. You should try this instead:
var canvas = $("#krpanoSWFObject canvas");
that returns the canvas element :)
Regards,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.