0
jQueryの顔検出プラグイン（私はthisを使用しています） を使用して、没入型360パノラマ画像の人の顔を検出できますか（krpano 1.19-pr5パノラマファイルを作成するためのツール（デモ版）とレンダリング用の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>
、これは動作しないでしょう、なぜ私は表示されません。現在のソリューションを機能している場所に投稿できますか？ここのコードスニペットではエラーが発生し、開始するピクチャはありません。 –