序文
それは信じられないほどの、JSはここまで強くなっているということではないでしょうか？はい、私はそれが進行し続け、日を追うごとJS。長い少し注意などとして、私たちは追いつくことができます。
今日は非常に強力することができどのようなjsのプラグインを見てみましょうか？
JavaScriptが簡単に認識を得ることができます
tracking.js
ブラウザ環境にライブラリ異なるコンピュータビジョンアルゴリズムと技術をtracking.js。現代のHTML5の仕様を使用することにより、その上でリアルタイムの色の追跡、顔検出とを可能にします。これらは、7キロバイトのサイズで、高速なハードウェアを備えています。
顔認識の例
<スクリプトSRC = "./追跡-min.js "> </ SCRIPT>
<スクリプトSRC =" ./顔-min.js "> </ SCRIPT>
...
<IMGのid =" IMG" SRC = "資産/faces.jpg ">
...
<SCRIPT>
window.onload =関数（）{
VAR IMG =のdocument.getElementById（ 'IMG'）。
VARトラッカー=新しいtracking.ObjectTracker（ '顔'）;
tracking.track（IMG、トラッカー）。
tracker.on（ 'トラック'、関数（イベント）{
event.data.forEach（関数（RECT）{
にconsole.log（rect.x、rect.y、rect.width、rect.height）;
plotRectangle（rect.x 、rect.y、rect.width、rect.height）;
}）;
}）;
//下方的代码可以先忽略
VARの友人= [ 'トーマス・ミドルディッチ'、 'マーティン・スター' 「ザック・ウッズ」];
VAR plotRectangle =関数（X、Y、W、H）{
VAR RECT =のdocument.createElement（ 'DIV'）;
VAR矢印=のdocument.createElement（ 'DIV'）;
VAR入力=のdocument.createElement（ '入力'）。
input.value = friends.pop（）。
rect.onclick =関数名（）{
input.select（）。
}。
arrow.classList.add（ '矢印'）;
rect.classList.add（ 'RECT'）;
rect.appendChild（入力）。
rect.appendChild（矢印）。
document.getElementById（ '写真'）のappendChild（RECT）。
rect.style.width = + 'PX'、W。
rect.style.height = H + 'ピクセル';
rect.style.left =（img.offsetLeft + X）+ 'PX'。
rect.style.top =（img.offsetTop + Y）+ 'PX'。
}。
}。
</ SCRIPT>
コード分析：
図1に示すように、最初に導入tracking.js、および関連する例JS
2、新しいものの例として、コレクションの顔、event.dataを取得
図3に示すように、コレクションを、各顔の座標情報を取得します
図4に示すように、座標（この部分は、主に上記ステップ3で、無視することができる）選挙を描きます
JavaScriptが簡単に認識を得ることができます
コレクションの説明を座標
JavaScriptが簡単に認識を得ることができます
顔、口、目の認識
コードは似ているが、2つのJSファイルの導入を必要
...
<スクリプトSRC = "./目-min.js "> </ SCRIPT>
<スクリプトSRC =" ./口-min.js"> </ SCRIPT>
...
<スクリプト>
VARトラッカー=新しいトラッキング.ObjectTracker（[ '顔'、 '目'、 '口']）。
</ SCRIPT>
JavaScriptが簡単に認識を得ることができます
マップすることで、あなたは、問題を見つけることは非常にサイトをクリアしていない、特定できない、遠く肖像画の左に、片目だけを同定しました。
あり、プラグが-jsが顔認識を行うことができ、我々は比較することになります。
PK
まず、名前が示すように、jQueryのベースのプラグインである、追加のプラグインの顔認識、JqueryFaceDetectionを導入します。
我々上記のコードは、主に、認知度を見て状況を認識し、比較しません。
JavaScriptが簡単に認識を得ることができます
この図は、あなたは私が数ゴリラの意味置く与える、パートナーが言う小さな趣味のJqueryFaceDetection、何？言って良いの顔認識がある出てきましたか？まあ、私は、チャートを見て間違っていました。
tracking.js
JavaScriptが簡単に認識を得ることができます
JqueryFaceDetection
JavaScriptが簡単に認識を得ることができます
十分な問題を説明するために、この時間は、わずかに良いtracking.js。
色認識
色の認識は唯一の追跡-min.jsに導入されます。同図において、ここで、マゼンタ、シアンとイエローを見つけるために、フレームの付きました。
window.onload = function() {
var img = document.getElementById('img');
var demoContainer = document.querySelector('.demo-container');
var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
window.plot(rect.x, rect.y, rect.width, rect.height, rect.color);
});
});
tracking.track('#img', tracker);
window.plot = function(x, y, w, h, color) {
var rect = document.createElement('div');
document.querySelector('.demo-container').appendChild(rect);
rect.classList.add('rect');
rect.style.border = '2px solid ' + color;
rect.style.width = w + 'px';
rect.style.height = H + 'ピクセル';
rect.style.left =（img.offsetLeft + X）+ 'PX'。
rect.style.top =（img.offsetTop + Y）+ 'PX'。
}。
}。
JavaScriptが簡単に認識を得ることができます
他の
tracking.jsは写真だけを識別するだけでなく、ビデオを扱うことができません。
JavaScriptが簡単に認識を得ることができます
JavaScriptが簡単に認識を得ることができます
全体的に、感情は非常に強力ではないのですか？将来的には、より多くの強力なフロントエンド技術である、とあなたが手を組むことができます願っています。
https://www.toutiao.com/a6661849672778252814/?timestamp=1575847785&app=news_article&group_id=6661849672778252814&req_id=2019120907294501001404009123D82470からの振替