1. jquery face detecttion plug in download
https://github.com/jaysalvat/jquery.facedetection
jaysalvat/jquery.facedetection
A jQuery plugin to detect faces on images, videos and canvases. - jaysalvat/jquery.facedetection
github.com
2. Open VS code and create index.html
3. Copy "dist" directory to the same directory of index.html
4. Copy an image to the same directory of index.html
5. ! + Enter = Create html template code
6. Add below codes
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .face-box { border: 1px solid #f00; position: absolute; } </style> </head> <body> <div class="wrapper"> <img id="picture" src="image.jpg" /> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="dist/jquery.facedetection.min.js"></script> <script> $('#picture').faceDetection({ complete: function (faces) { console.log(faces); $div = $("<div>", { "class": "face-box" }); $div.css('top', faces[0].positionY); $div.css('left', faces[0].positionX); $div.css('width', faces[0].width); $div.css('height', faces[0].height); $(".wrapper").append($div); } }); </script> </body> </html>
7. Result
8. 여러 얼굴 인식
for (var i = 0; i < faces.length; i++) { $div = $("<div>", { "class": "face-box" }); $div.css('top', faces[i].positionY); $div.css('left', faces[i].positionX); $div.css('width', faces[i].width); $div.css('height', faces[i].height); $(".wrapper").append($div); }
9. face detect error 처리
error: function (code, message) { alert('Error: ' + message); }
10. Full code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .face-box { border: 2px solid #f00; position: absolute; } </style> </head> <body> <div class="wrapper"> <img id="picture" src="assets/picture.jpg" /> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="dist/jquery.facedetection.min.js"></script> <script> $('#picture').faceDetection({ complete: function (faces) { console.log(faces); for (var i = 0; i < faces.length; i++) { $div = $("<div>", { "class": "face-box" }); $div.css('top', faces[i].positionY); $div.css('left', faces[i].positionX); $div.css('width', faces[i].width); $div.css('height', faces[i].height); $(".wrapper").append($div); } }, error: function (code, message) { alert('Error: ' + message); } }); </script> </body> </html>
'Javascript' 카테고리의 다른 글
| 웹앱 만들기(React native, Expo, GroomIDE, Android & IOS WebApp) (0) | 2021.01.08 |
|---|---|
| Javascript face detection: face-api.js (0) | 2021.01.04 |
| vs code html templete(비쥬얼 코드 html 템플리트 자동 생성 방법 및 필수 핫키) (0) | 2021.01.04 |
| javascript input image (0) | 2021.01.04 |
| 15가지의 JavaScript 얼굴(안면) 인식 라이브러리 2020 (0) | 2021.01.04 |