2016-07-26 13 views
0

Возможно ли использовать плагин для распознавания лиц jQuery (я использую this) для обнаружения человеческих лиц в захватывающем панорамном изображении 360 (я использовал krpano 1.19-pr5 (build 2016-05-24) tools (demo version) для создания панорамных файлов и просмотра 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>

+0

Я не понимаю, почему это не будет работать. Можете ли вы опубликовать свое текущее решение где-нибудь, что оно функционирует? В этом фрагменте кода приводятся ошибки и нет изображения для начала. –

ответ

0

Это:

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

не должны работать, как находка не реализована в KRpano плагин. Вы должны попробовать это вместо:

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

, возвращающий элемент холста :)

С уважением,