Heim > Artikel > Web-Frontend > Lassen Sie uns über die JavaScript-Gesichtserkennungstechnologie sprechen
Ich habe mich schon immer sehr für die Erkennungstechnologie künstlicher Intelligenz interessiert, weil ich mir nicht vorstellen kann, um was für einen Algorithmus es sich handelt und um was für einen Analyseprozess es sich handelt. Ob es sich um Spracherkennung, Gesichtserkennung oder andere Arten der Erkennung handelt, das Aussehen und die Art und Weise, wie Menschen sprechen, sind so unterschiedlich. Ich kann nicht verstehen, wie diese Erkennungstechnologien funktionieren. Da die JavaScript-Akterkennungstechnologie bereits eingeführt wurde und ein Spiel namens „Mask“ diese Erkennungstechnologie ebenfalls verwendet, denke ich, dass auch die Gesichtserkennungstechnologie untersucht werden sollte. Facebook nutzt diese Technologie und kann auch in der Gestensteuerung eingesetzt werden, sodass sie auf Ihrer Website einen Platz findet.
Ein JavaScript-Paket, das ich für die Gesichtserkennung verwendet werden kann, ist Face Detection, das von Jay Salvat und Liu Liu entwickelt wurde. Es handelt sich um ein Standard-jQuery-Plugin, das das bereitgestellte Bild analysiert und die Koordinaten aller gefundenen Gesichtsbilder zurückgibt. Mal sehen, wie es verwendet wird!
Um das Gesichtserkennungs-jQuery-Plugin zu verwenden, müssen Sie vier js-Dateien einführen:
<script src="jquery-1.4.3.min.js"></script> <!-- mas js --> <script src="facedetection/ccv.js"></script> <script src="facedetection/face.js"></script> <script src="jquery.facedetection.js"></script>
Die ersten beiden Dateien dieses Gesichtserkennungs-Plugins sind verschiedene Funktionen Programme, mit denen Sie ein Array-Objekt erhalten können, das die Gesichtskoordinateninformationen im Bild speichert. Das Folgende ist ein Beispiel:
var coords = jQuery("#myImage").faceDetection(); /* 返回: { x: 525 y: 435, width: 144, height: 144, positionX: 532.6353328125226, positionY: 443.240976080536, offsetX: 532.6353328125226, offsetY: 443.240976080536, confidence: 12.93120119, neighbour: undefined, } */
Sie können der Erkennungsmethode auch eine Ereignisrückruffunktion hinzufügen:
var coords = jQuery("#myImage").faceDetection({ complete: function(image, coords) { // Do something }, error: function() { console.warn("无法分析图片"); } });
Sie können jede beliebige Verarbeitung für die erkannten Gesichtsinformationen durchführen. Sie können einen Rahmen um das Gesicht im Bild zeichnen:
jQuery("img").each(function() { var img = this; // 获取脸部坐标 var coordinates = jQuery(img).faceDetection(); // 在脸上画出框线 if(coordinates.length) { coordinates.forEach(function(coord) { jQuery("<p>", { css: { position: "absolute", left: coord.positionX + 5 + "px", top: coord.positionY + 5 + "px", width: coord.width + "px", height: coord.height + "px", border: "3px solid white" } }).appendTo(img.parentNode); }); } });
Das ist sehr einfach, natürlich können Sie komplexe Bearbeitungen durchführen, wie z. B. eine Extraktion.
Ich habe verschiedene Bilder verwendet, um die Gesichtserkennung auszuprobieren, und wie erwartet waren die Ergebnisse nicht perfekt. Aber egal, es ist immer noch ziemlich gut. Dies ist eine sehr einfache Skripttechnik, und keine Technik ist perfekt. Dieses Gesichtserkennungs-Plug-in verfügt nicht über eine Gesichtsvergleichsfunktion. Um diese Funktion zu erreichen, müssen Sie andere Methoden verwenden und Informationen zu Gesichtsmerkmalen bereitstellen. Alles in allem ist es ziemlich gut und ich empfehle Ihnen dringend, es auszuprobieren.
Verwandte Lernempfehlungen: Javascript-Video-Tutorial
Das obige ist der detaillierte Inhalt vonLassen Sie uns über die JavaScript-Gesichtserkennungstechnologie sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!