0

这是否可以使用 jQuery 人脸检测插件（我正在使用这个）来检测沉浸式 360 全景图像中的人脸（我使用了 krpano 1.19-pr5（构建 2016-05-24）工具（演示版）构建全景文件和krpano html5查看器进行渲染。你可以从这里下载整个包）？

面部检测插件适用于简单的 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>

4

1 回答 1

0

这个：

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

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

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

返回画布元素:)

问候，

于 2016-08-16T15:10:05.247 回答