檢測身臨其境的全景圖像中的人臉

這是可能使用jQuery人臉檢測插件（我使用this）檢測身臨其境的360全景圖像中的人臉（我用krpano 1.19-pr5（構建2016-05-24）工具（演示版本）來構建全景文件和用於渲染的krpano html5查看器。您可以從here下載整個包）？檢測身臨其境的全景圖像中的人臉

面部檢測插件可以很好地處理簡單的2D圖像和HTML5畫布。 krpano查看器也會在畫布中呈現目標全景圖片。以下是在瀏覽器中呈現全景圖像的HTML文件的代碼。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>krpano - test_pano_3</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 
 
\t <meta name="apple-mobile-web-app-capable" content="yes" /> 
 
\t <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
 
\t <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
\t <meta http-equiv="x-ua-compatible" content="IE=edge" /> 
 
\t <style> 
 
\t \t @-ms-viewport { width:device-width; } 
 
\t \t @media only screen and (min-device-width:800px) { html { overflow:hidden; } } 
 
\t \t html { height:100%; } 
 
\t \t body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; } 
 
\t </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%;"> 
 
\t <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> 
 
\t <script> 
 
\t \t embedpano({swf:"test_pano_3.swf", xml:"test_pano_3.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true}); 
 
\t </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>

來源

2016-07-26 SevenMonks

我不明白爲什麼這是行不通的。你可以在當前正在運行的地方發佈你的當前解決方案嗎？這裏的代碼片斷會產生錯誤，並沒有圖片開始。 –

此：

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

如發現不KRpano插件實現不應該工作。而應該試試這個：

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

返回canvas元素:)

問候，

來源

2016-08-16 15:10:05 Anoril

檢測身臨其境的全景圖像中的人臉

回答

相關問題