Added base app structure (face detector->not working)
This commit is contained in:
parent
e867ac1d3a
commit
cd35dd58a6
@ -1,3 +1,7 @@
|
||||
# photo_mem
|
||||
|
||||
Outil web de sauvegarde des noms des personnes sur les photos et d'identification automatique des visages.
|
||||
|
||||
## Détection de visage
|
||||
|
||||
La détection de visage utilise la librairie OpenCV.js avec [*"Haar Feature-based Cascade Classifier"*](https://docs.opencv.org/3.4/d2/d99/tutorial_js_face_detection.html).
|
16
index.html
16
index.html
@ -12,7 +12,7 @@ License: GNU AGPL v3
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>photo_mem v1.0.0</title>
|
||||
<!--v1.0.0 is not actual, it is set in script.js-->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -20,10 +20,12 @@ License: GNU AGPL v3
|
||||
<h1>photo_mem v<span class="version">1.0.0</span></h1>
|
||||
</header>
|
||||
<main>
|
||||
<input id="file" multiple type="file" class=cotecote onChange="lecfic(this.files);" />
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer xml" onclick="enregistrer_fichier(enreg_xml)" />
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()" />
|
||||
|
||||
<div class="actions">
|
||||
<input id="file" multiple type="file" class=cotecote onChange="lecfic(this.files);" />
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer xml" onclick="enregistrer_fichier(enreg_xml)" />
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()" />
|
||||
<input type="button" id="detect" value="detect">
|
||||
</div>
|
||||
<div style="position: relative; ">
|
||||
<img src="" id="ima_fond" style="position: absolute; left: 0; top: 0; z-index: 0;">
|
||||
</div>
|
||||
@ -59,7 +61,9 @@ License: GNU AGPL v3
|
||||
🄯 Liness <em>et al.</em>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
<script src="https://docs.opencv.org/4.5.2/opencv.js"></script>
|
||||
<script src="scripts/script.js"></script>
|
||||
<script src="scripts/detector.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
Before Width: | Height: | Size: 898 KiB After Width: | Height: | Size: 898 KiB |
35
media/zizou.xml
Normal file
35
media/zizou.xml
Normal file
@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<photo>
|
||||
<titre titx="350px" tity="55px">Coupe du monde 1998 </titre>
|
||||
<date/>
|
||||
<lieu/>
|
||||
<auteur/>
|
||||
<commentaire/>
|
||||
<personne>
|
||||
<nom>Zizou</nom>
|
||||
<nom_jeune_fille>
|
||||
</nom_jeune_fille>
|
||||
<prenom>
|
||||
</prenom>
|
||||
<surnom>
|
||||
</surnom>
|
||||
<annee_naiss>
|
||||
</annee_naiss>
|
||||
<note>
|
||||
</note>
|
||||
<position posx="104" posy="132" etx="74px" ety="192px"/>
|
||||
</personne>
|
||||
<personne>
|
||||
<nom>Deschamps </nom>
|
||||
<nom_jeune_fille>
|
||||
</nom_jeune_fille>
|
||||
<prenom>Didier</prenom>
|
||||
<surnom>
|
||||
</surnom>
|
||||
<annee_naiss>
|
||||
</annee_naiss>
|
||||
<note>
|
||||
</note>
|
||||
<position posx="399" posy="323" etx="369px" ety="383px"/>
|
||||
</personne>
|
||||
</photo>
|
14382
models/haarcascade_frontalcatface.xml
Normal file
14382
models/haarcascade_frontalcatface.xml
Normal file
File diff suppressed because it is too large
Load Diff
29690
models/haarcascade_profileface.xml
Normal file
29690
models/haarcascade_profileface.xml
Normal file
File diff suppressed because it is too large
Load Diff
30
scripts/detector.js
Normal file
30
scripts/detector.js
Normal file
@ -0,0 +1,30 @@
|
||||
let img = document.getElementById('ima_fond');
|
||||
let mat;
|
||||
img.onload = function() {
|
||||
mat = cv.imread(img);
|
||||
document.getElementById('detect').addEventListener('click', function() {
|
||||
console.log(mat);
|
||||
let gray = new cv.Mat();
|
||||
cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||
let faces = new cv.RectVector();
|
||||
let profiles = new cv.RectVector();
|
||||
let faceCascade = new cv.CascadeClassifier();
|
||||
let profileCascade = new cv.CascadeClassifier();
|
||||
// Load pretrained classifier
|
||||
faceCascade.load("../models/haarcascade_frontalcatface.xml");
|
||||
profileCascade.load("../models/haarcascade_profileface.xml");
|
||||
// Detect faes
|
||||
let msize = new cv.Size(0, 0);
|
||||
faceCascade.detectMultiScale(gray, faces, 1.05, 0);
|
||||
profileCascade.detectMultiScale(gray, profiles, 1.1, 3, 0, msize, msize);
|
||||
|
||||
// Show detected faces
|
||||
faces = faces.concat(profiles);
|
||||
for (let i = 0; i < faces.length; i++) {
|
||||
let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
|
||||
let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
|
||||
faces.get(i).y + faces.get(i).height);
|
||||
cv.rectangle(mat, point1, point2, [255, 0, 0, 255]);
|
||||
}
|
||||
});
|
||||
}
|
937071
scripts/opencv.js
Normal file
937071
scripts/opencv.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user