Question

这可以使用jQuery人脸检测插件（我正在使用this）在沉浸式360度全景图像中检测人脸（我使用了krpano 1.19-pr5（构建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>

Answer 1

此：

var canvas = $("#krpanoSWFObject").find("canvas")[0];

不应该工作，因为在KRpano插件中没有实现find。你应该试试这个：

var canvas = $("#krpanoSWFObject canvas");

返回canvas元素：）

此致

在沉浸式全景图像中检测人脸

1 个答案: