js顔認証、tracker.jsフロントエンド顔認証フレームワーク
2022-03-02 06:05:59
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tracking-based face-taking</title>
<script src="js/tracking-min.js"></script>
<script src="js/face-min.js"></script>
<script src="js/eye-min.js"></script>
<script src="js/mouth-min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="face" style="border:1px solid yellow;position:absolute;display:none;"></div>
<img id="img" src="https://img-blog.csdnimg.cn/2022010614020738216.jpeg" alt=""/>
<script>
// tracking.ObjectTracker() は、タグ付けしたいオブジェクトを分類するためのパラメータの配列を受け取ります（例：顔全体、目、鼻、口、など）。
// setStepSize() は、タグ付けに使用するボックスのステップサイズを指定する。
// このイベントは、マークしたいオブジェクトの初期化が完了した時点で発行されます。
// データはオブジェクト配列のリストに格納され、その値はタグ付けされた各オブジェクトの長さ、幅、および x と y の座標となります。
window.onload = function () {
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker(['face']); // パラメータに基づき、配列を返します。
// tracker.setStepSize(1.7)を実行。
tracker.track('#img', tracker);
tracker.on('track', function (event) {)
if (event.data.length === 0) {
alert("No one's face")
} else {
var count = 0;
event.data.forEach(function (rect) {)
// console.log(イベント)
console.log(rect)
draw(rect.x, rect.y, rect.width, rect.height);
// alert("だれかの顔")
count++を使用します。
});
console.log("Number of faces recognized: " + count)を実行します。
}
});
//ボックスを描画する
関数 draw(x, y, w, h) {.
var face = $(".face").clone(true);
face.css({"width":w+"px","height":h+"px","left":(img.offsetLeft + x)+"px" ;,"top":(img.offsetTop + y)+"px"}) を使用することができます。
face.removeClass("face");
face.show()を実行します。
$("#img").before(face);
}
}
</script>
</body>
</html>
デモのダウンロードアドレス： https://pan.baidu.com/s/1yjMz7Yir2dB77wvYiYvu_g
<html>
<head>
<meta charset="utf-8">
<title>Tracking-based face-taking</title>
<script src="js/tracking-min.js"></script>
<script src="js/face-min.js"></script>
<script src="js/eye-min.js"></script>
<script src="js/mouth-min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="face" style="border:1px solid yellow;position:absolute;display:none;"></div>
<img id="img" src="https://img-blog.csdnimg.cn/2022010614020738216.jpeg" alt=""/>
<script>
// tracking.ObjectTracker() は、タグ付けしたいオブジェクトを分類するためのパラメータの配列を受け取ります（例：顔全体、目、鼻、口、など）。
// setStepSize() は、タグ付けに使用するボックスのステップサイズを指定する。
// このイベントは、マークしたいオブジェクトの初期化が完了した時点で発行されます。
// データはオブジェクト配列のリストに格納され、その値はタグ付けされた各オブジェクトの長さ、幅、および x と y の座標となります。
window.onload = function () {
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker(['face']); // パラメータに基づき、配列を返します。
// tracker.setStepSize(1.7)を実行。
tracker.track('#img', tracker);
tracker.on('track', function (event) {)
if (event.data.length === 0) {
alert("No one's face")
} else {
var count = 0;
event.data.forEach(function (rect) {)
// console.log(イベント)
console.log(rect)
draw(rect.x, rect.y, rect.width, rect.height);
// alert("だれかの顔")
count++を使用します。
});
console.log("Number of faces recognized: " + count)を実行します。
}
});
//ボックスを描画する
関数 draw(x, y, w, h) {.
var face = $(".face").clone(true);
face.css({"width":w+"px","height":h+"px","left":(img.offsetLeft + x)+"px" ;,"top":(img.offsetTop + y)+"px"}) を使用することができます。
face.removeClass("face");
face.show()を実行します。
$("#img").before(face);
}
}
</script>
</body>
</html>
デモのダウンロードアドレス： https://pan.baidu.com/s/1yjMz7Yir2dB77wvYiYvu_g
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ハートビート・エフェクトのためのHTML+CSS
-
HTML ホテル フォームによるフィルタリング
-
HTML+cssのボックスモデル例（円、半円など）「border-radius」使いやすい
-
HTMLテーブルのテーブル分割とマージ（colspan, rowspan）
-
ランダム・ネームドロッパーを実装するためのhtmlサンプルコード
-
Html階層型ボックスシャドウ効果サンプルコード
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
sublime / vscodeショートカットHTMLコード生成の実装
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
html のリストボックス、テキストフィールド、ファイルフィールドのコード例