cari

Rumah >hujung hadapan web >tutorial js >Pengesanan muka menggunakan kemahiran JavaScript_javascript

Pengesanan muka menggunakan kemahiran JavaScript_javascript

WBOY
WBOYasal
2016-05-16 16:07:501522semak imbas

Saya sentiasa berminat dengan teknologi pengetegan muka, pengesanan dan pengecaman muka dalam video dan gambar. Walaupun saya tahu bahawa mendapatkan logik dan algoritma untuk membangunkan perisian pengecaman muka atau pemalam adalah di luar imaginasi saya. Apabila saya mengetahui bahawa perpustakaan Javascript boleh mengecam senyuman, mata dan struktur muka, saya telah diilhamkan untuk menulis tutorial. Terdapat banyak perpustakaan, yang sama ada berasaskan Javascript semata-mata atau berdasarkan bahasa Java.

Hari ini, kami mula mempelajari tracking.js, iaitu perpustakaan javascript ringan yang dibangunkan oleh Eduardo Lundgren. Ia membolehkan anda melakukan pengesanan muka masa nyata, penjejakan warna dan menandai muka rakan. Dalam tutorial ini kita akan melihat bagaimana kita boleh mengesan muka, mata dan mulut daripada imej statik.
Pada penghujung tutorial, anda boleh melihat tutorial yang menyediakan contoh yang berkesan dengan petua dan kiat serta butiran yang lebih teknikal.

Pertama, kita perlu mencipta projek, memuat turun projek daripada github dan mengekstrak folder binaan, dan letakkan folder binaan mengikut struktur fail dan direktori anda. Dalam tutorial ini, saya menggunakan fail dan struktur direktori berikut.

Struktur folder

Project Folder
│
│  index.html
│
├───assets
│    face.jpg
│
└───js
  │  tracking-min.js
  │  tracking.js
  │
  └───data
      eye-min.js
      eye.js
      face-min.js
      face.js
      mouth-min.js
      mouth.js

Anda dapat melihat bahawa folder js mengandungi fail javascript yang kami ekstrak daripada tracking.js. Di bawah ialah kod html index.html.

Kod HTML

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>@tuts Face Detection Tutorial</title>
 
 <script src="js/tracking-min.js"></script>
 <script src="js/data/face-min.js"></script>
 <script src="js/data/eye-min.js"></script>
 <script src="js/data/mouth-min.js"></script>
 
 <style>
 .rect {
  border: 2px solid #a64ceb;
  left: -1000px;
  position: absolute;
  top: -1000px;
 }
 
 #img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -173px 0 0 -300px;
 }
 </style>
</head>
<body>
<div class="imgContainer">
 <img id="img" src="assets/face.jpg" />
</div>
 
</body>
</html>

Dalam kod HTML di atas, kami memperkenalkan 4 fail javascript daripada tracking.js, yang membantu kami mengesan muka, mata dan mulut daripada imej. Kini kami menulis sekeping kod untuk mengesan muka, mata dan mulut daripada imej statik. Saya sengaja memilih imej ini kerana ia mengandungi beberapa wajah dengan ekspresi dan pose yang berbeza.

Untuk mencapai matlamat, kita perlu mengubah suai kod dalam pengepala fail html.

Kod HTML

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>@tuts Face Detection Tutorial</title>
 
 <script src="js/tracking-min.js"></script>
 <script src="js/data/face-min.js"></script>
 <script src="js/data/eye-min.js"></script>
 <script src="js/data/mouth-min.js"></script>
 
 <style>
 .rect {
  border: 2px solid #a64ceb;
  left: -1000px;
  position: absolute;
  top: -1000px;
 }
 
 #img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -173px 0 0 -300px;
 }
 </style>
// tracking code.
<script>
  window.onload = function() {
   var img = document.getElementById('img');
 
   var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); // Based on parameter it will return an array.
   tracker.setStepSize(1.7);
 
   tracking.track('#img', tracker);
 
   tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
     draw(rect.x, rect.y, rect.width, rect.height);
    });
   });
 
   function draw(x, y, w, h) {
    var rect = document.createElement('div');
    document.querySelector('.imgContainer').appendChild(rect);
    rect.classList.add('rect');
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
   };
  };
 </script>
 
</head>
<body>
<div class="imgContainer">
 <img id="img" src="assets/face.jpg" />
</div>
 
</body>
</html>

Keputusan

Perihalan kod.
Kaedah tracking.ObjectTracker() mengklasifikasikan objek yang anda mahu jejak dan ia boleh menerima tatasusunan sebagai parameter.
setStepSize() Saiz langkah bagi blok yang ditentukan.
Kami mengikat objek untuk dijejaki ke acara "trek" Setelah objek dijejaki, acara penjejakan akan dicetuskan oleh objek yang dijejaki tidak lama lagi.
Kami mendapat data dalam bentuk tatasusunan objek, yang mengandungi koordinat lebar, tinggi, x dan y setiap objek (muka, mulut dan mata
); Ringkasan keputusan.
Anda mungkin mendapati bahawa keputusan akan berbeza-beza bergantung pada keadaan bentuk, dan terdapat kawasan untuk penambahbaikan dan penambahbaikan, dan kami mengakui dan benar-benar bersetuju dengan pembangunan jenis API ini.
Contoh larian:
Contoh berjalan dengan gambar.
Lebih Banyak Sumber – Pengecaman Muka Berdasarkan Javascript
https://github.com/auduno/headtrackr
https://github.com/auduno/clmtrackr

Kami merancang untuk melakukan tutorial untuk penjejakan muka dan pelabelan imej Kanvas HTML5 dan video kamera. Anda boleh menggunakan blog akses kamera sisi pelanggan yang saya nyatakan di atas, yang boleh membantu anda mengakses kamera pengguna dengan cara yang anda tahu.
Nota: Atas sebab keselamatan penyemak imbas, program ini perlu dijalankan pada domain yang sama atau dalam penyemak imbas dengan keselamatan web dilumpuhkan.

Sila luangkan sedikit masa untuk berkongsi artikel dengan rakan anda atau tinggalkan komen. Kami akan berterima kasih atas sokongan anda!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JavaScript untuk menukar nombor kepada kemahiran Chinese_javascript huruf besarArtikel seterusnya：Kaedah JavaScript untuk menukar nombor kepada kemahiran Chinese_javascript huruf besar

Artikel berkaitan

Lihat lagi