Liness
/
photo_mem
5
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Added base app structure (face detector->not working)

This commit is contained in:
Samuel Ortion 2021-05-03 13:06:34 +02:00
parent e867ac1d3a
commit cd35dd58a6
12 changed files with 981223 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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).

0
photo_init.xml → data/photo_init.xml
View File

0
zizou.xml → data/zizou.xml
View File

10
index.html
View File

@ -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>
<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
&#127279; 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>

0
zizou.png → media/zizou.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 898 KiB

After

Width:  |  Height:  |  Size: 898 KiB

35
media/zizou.xml Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

29690
models/haarcascade_profileface.xml Normal file
View File

File diff suppressed because it is too large Load Diff

30
scripts/detector.js Normal file
View 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
View File

File diff suppressed because one or more lines are too long

0
script.js → scripts/script.js
View File

0
style.css → styles/style.css
View File