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

enlever le code mort, améliorer le formulaire d'ajout: autofocus, label

Browse Source
This commit is contained in:
Tykayn 2021-10-04 11:07:01 +02:00 committed by tykayn
parent 5c0a357cc8
commit 8913f6458a
3 changed files with 347 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

492
main.js
View File

@ -1,143 +1,195 @@
var personnes=[],nom=[],nomjf=[],prenom=[],annee=[],note=[],posx=[],posy=[],etx=[],ety=[], can_etiq=[];
var ibac=0, tit={}, titre="", fond=[];
var mode_saisie="true" // mode saisie true, mode modification false
/**
* définition des constantes
*/
var personnes = [], nom = [], nomjf = [], prenom = [], annee = [], note = [], posx = [], posy = [], etx = [], ety = [],
can_etiq = [];
var ibac = 0, tit = {}, titre = "", fond = [];
var mode_saisie = "true" // mode saisie true, mode modification false
var image = document.getElementById('ima_fond');
var cercle = document.getElementById("cirsvg");
var menu = document.getElementById("menu_modif");
var modif_titre = document.getElementById("nouveau_titre");
var cant = document.createElement("canvas");
document.body.appendChild(cant);
var canevas_photo = document.createElement("canvas");
document.body.appendChild(canevas_photo);
/**
* écoute du changement de l'input fichier pour charger la photo
* @type {HTMLElement}
*/
let inputElement = document.getElementById('fichiers');
inputElement.addEventListener('change', (e) => {
lecfic(e.target.files)
lecture_photo(e.target.files)
}, false);
function lecfic(fichier) {
nb_fichier=fichier.length
var i_xml=1, i_img=0;
if (fichier[0].name.split('.').pop()=="xml") {i_xml=0; i_img=1};
var src=fichier[i_img].name.substring(0,fichier[i_img].name.indexOf("."));
enreg_xml=src+".xml"
enreg_noms=src+"_noms.png"
fichier_xml=fichier[i_xml];
fond=fichier[i_img];
function lecture_photo(fichier) {
nb_fichier = fichier.length
var i_xml = 1, i_img = 0;
if (fichier[0].name.split('.').pop() == "xml") {
i_xml = 0;
i_img = 1
}
var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
enreg_xml = src + ".xml"
enreg_noms = src + "_noms.png"
fichier_xml = fichier[i_xml];
fond = fichier[i_img];
affiche_fond();
if (nb_fichier==1) {creation_data_xml(); lecture_xml(); return} // Un seul fichier sélectionné : l'image à traiter
// Un seul fichier sélectionné : l'image à traiter
if (nb_fichier == 1) {
creation_data_xml();
lecture_xml();
return
}
if (fichier_xml.name.startsWith("haar")) {creation_data_xml(); detection_de_visages();return} // deux fichiers selectionnés : l'image et haarcascade.xml
// deux fichiers selectionnés : l'image et haarcascade.xml
if (fichier_xml.name.startsWith("haar")) {
creation_data_xml();
detection_de_visages();
return
}
// deux fichiers selectionnés : l'image et le xml du même nom
var reader = new FileReader();
reader.onload = function(evt) {lecture(evt.target.result);};
reader.onload = function (evt) {
lecture(evt.target.result);
};
reader.readAsText(fichier_xml);
function lecture(text) {
var parser = new DOMParser();
data_xml = parser.parseFromString(text,"text/xml");
data_xml = parser.parseFromString(text, "text/xml");
lecture_xml();
};
}
// Chargement et affichage de l'image background
/**
* Chargement et affichage de l'image background
*/
function affiche_fond() {
var read_fond = new FileReader();
var read_fond = new FileReader();
read_fond.addEventListener("load", function (evt) {
image.src = evt.target.result;
console.log('image', image, image.offsetLeft, image.offsetTop);
}, false);
read_fond.readAsDataURL(fond);
}
function lecture_xml() {
tit = data_xml.documentElement.getElementsByTagName("titre")[0];
titre=tit.textContent
titre = tit.textContent
personnes = data_xml.documentElement.getElementsByTagName("personne");
nb_pers=personnes.length
nb_pers = personnes.length
console.log('image', image, image.offsetLeft, image.offsetTop);
for (var i = 0; i < nb_pers; i++) {
nom[i] = personnes[i].getElementsByTagName( "nom")[0].textContent;
if (personnes[i].getElementsByTagName( "nom_jeune_fille")[0]) {
nomjf[i] = personnes[i].getElementsByTagName( "nom_jeune_fille")[0].textContent;
nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
nomjf[i] = personnes[i].getElementsByTagName("nom_jeune_fille")[0].textContent;
}
prenom[i] = personnes[i].getElementsByTagName( "prenom")[0].textContent;
annee[i] = personnes[i].getElementsByTagName( "annee_naiss")[0].textContent;
note[i] = personnes[i].getElementsByTagName( "note")[0].textContent;
posx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posx'].value);
posy[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posy'].value);
etx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['etx'].value);
ety[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['ety'].value);
prenom[i] = personnes[i].getElementsByTagName("prenom")[0].textContent;
annee[i] = personnes[i].getElementsByTagName("annee_naiss")[0].textContent;
note[i] = personnes[i].getElementsByTagName("note")[0].textContent;
posx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posx'].value + image.offsetLeft);
posy[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posy'].value + image.offsetTop);
etx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['etx'].value + image.offsetLeft);
ety[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['ety'].value + image.offsetTop);
}
if (titre!=='') {affiche_titre(titre)}
affiche_etiquette() ;
if (titre !== '') {
affiche_titre(titre)
}
affiche_etiquette();
};
function affiche_titre(titre_photo) {
cant.className="tit";
cant.height=23;
var taille=titre_photo.length;
cant.width=taille*12;
tx = parseFloat(tit.attributes['titx'].value);
ty = parseFloat(tit.attributes['tity'].value);
cant.style.left = tx + "px";
cant.style.top = ty + "px";
titre_ctx = cant.getContext("2d");
titre_ctx.font = '21px Arial';
titre_ctx.fillStyle = 'Maroon';
canevas_photo.className = "titre";
canevas_photo.height = 23;
var taille = titre_photo.length;
canevas_photo.width = taille * 12;
tx = parseFloat(tit.attributes['titx'].value + image.offsetLeft);
ty = parseFloat(tit.attributes['tity'].value + image.offsetTop);
canevas_photo.style.left = tx + "px";
canevas_photo.style.top = ty + "px";
titre_ctx = canevas_photo.getContext("2d");
titre_ctx.fillText(titre_photo, 20, 18);
affiche_etiquette() ;
affiche_etiquette();
}
/**
* affichage du texte nom/prénom dans des canvas etiquette
*/
function affiche_etiquette() {
// affichage du texte nom/prénom dans des canvas etiquette
rayon=28
rayon = 28
for (var i = 0; i < nb_pers; i++) {
var id="can"+i;
if (document.getElementById(id)) continue ;
var id = "can" + i;
if (document.getElementById(id)) continue;
var canv = document.createElement("canvas");
canv.id=id;
canv.id = id;
canv.setAttribute('class', 'people_label')
document.body.appendChild(canv);
can_etiq[i] = document.getElementById(canv.id);
can_etiq[i].className="etiq";
can_etiq[i].height=30;
can_etiq[i].className = "etiq";
can_etiq[i].height = 30;
etiq_ctx = can_etiq[i].getContext("2d");
var taille=Math.max(nom[i].length,prenom[i].length,nomjf[i].length+5);
can_etiq[i].width=taille*7+10
if (nomjf[i].replace(/\t/g, '').length>1) {can_etiq[i].height=45};
etiq_ctx.font = '13px Arial';
etiq_ctx.fillStyle = 'chocolate';
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
can_etiq[i].width = taille * 7 + 10
if (nomjf[i].replace(/\t/g, '').length > 1) {
can_etiq[i].height = 45
}
;
can_etiq[i].style.left = etx[i] + "px";
can_etiq[i].style.top = ety[i] + "px";
can_etiq[i].style.top = ety[i] + "px";
etiq_ctx.fillText(nom[i], 7, 12);
etiq_ctx.fillText(prenom[i], 7, 25);
if (nomjf[i].length>1) {etiq_ctx.fillText("née : "+nomjf[i], 7, 38)};
};
if (nomjf[i].length > 1) {
etiq_ctx.fillText("née : " + nomjf[i], 7, 38)
}
;
}
;
gestion_souris();
};
function gestion_souris() {
if (titre!=='') { // pour déplacer le titre
cant.addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
cant.addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
// pour déplacer le titre
if (titre !== '') {
canevas_photo.addEventListener("mousedown", function (e) {
this.addEventListener("mousemove", deplace_etiquette);
});
canevas_photo.addEventListener("mouseup", function (e) {
this.removeEventListener("mousemove", deplace_etiquette);
});
}
for (var i = 0; i < nb_pers; i++) { // pour déplacer les étiquettes nom,prénom ...
can_etiq[i].addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
can_etiq[i].addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
};
// pour déplacer les étiquettes nom,prénom ...
for (var i = 0; i < nb_pers; i++) {
can_etiq[i].addEventListener("mousedown", function (e) {
this.addEventListener("mousemove", deplace_etiquette);
});
can_etiq[i].addEventListener("mouseup", function (e) {
this.removeEventListener("mousemove", deplace_etiquette);
});
}
;
ima_fond.addEventListener('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle personne
cercle.addEventListener('contextmenu', function (e) { menu_modif(e); e.preventDefault();}, false); // menu modif personne
cercle.addEventListener('contextmenu', function (e) {
menu_modif(e);
e.preventDefault();
}, false); // menu modif personne
};
function deplace_etiquette(e){
e.target.style.top = e.pageY-15+"px";
e.target.style.left = e.pageX-30+"px";
function deplace_etiquette(e) {
e.target.style.top = e.pageY - 15 + "px";
e.target.style.left = e.pageX - 30 + "px";
};
function menu_modif(){
menu.style.left = parseFloat(cercle.getAttribute("cx"))+10 +"px";
menu.style.top = parseFloat(cercle.getAttribute("cy"))+40 +"px";
menu.style.visibility="visible";
function menu_modif() {
menu.style.left = parseFloat(cercle.getAttribute("cx")) + 10 + "px";
menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "px";
menu.style.visibility = "visible";
}
function supprimer_personne() {
@ -147,92 +199,59 @@ function supprimer_personne() {
for (var i = 0; i < nb_pers; i++) {
x = can_etiq[i];
x.parentNode.removeChild(x);
};
cercle.style.visibility="hidden";
}
;
cercle.style.visibility = "hidden";
lecture_xml();
}
function creation_data_xml() {
var x, i;
var txt = "";
var text = "<photo>" +
"<titre titx='50px' tity='50px'>Titre "+ fond.name + "</titre>" +
"<titre titx='50px' tity='50px'>Titre " + fond.name + "</titre>" +
"<date> </date>" +
"<lieu> </lieu>" +
"<commentaire> </commentaire>" +
"</photo>";
var parser_face = new DOMParser();
data_xml = parser_face.parseFromString(text,"text/xml");
// documentElement always represents the root node
data_xml = parser_face.parseFromString(text, "text/xml");
// documentElement always represents the root node
x = data_xml.documentElement.childNodes;
for (i = 0; i < x.length ;i++) {
for (i = 0; i < x.length; i++) {
txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
}
};
function detection_de_visages() {
// alert pour temporiser
alert("Ok pour continuer")
src = cv.imread(ima_fond);
gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
chargement_haarcascade();
}
function chargement_haarcascade() {
var reader_haar = new FileReader();
reader_haar.onload = function(ev) {
function str2ab(text) {
return new TextEncoder().encode(text);
}
faceCascadeFile = fichier_xml.name;
let data=str2ab(reader_haar.result)
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
detect_faces();
};
reader_haar.readAsText(fichier_xml);
}
function envoi_formulaire_ajout() {
function detect_faces() {
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load(faceCascadeFile);
// detect faces
let msize = new cv.Size(0, 0);
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.log("Il y a "+ faces.size()+" visage(s)")
for (let i = 0; i < faces.size(); ++i) {
ajouter_personne_xml("nom_"+parseInt(i)+" ",faces.get(i).x,faces.get(i).y,faces.get(i).width,faces.get(i).height)
}
// cv.imshow('ima_fond', src);
src.delete(); gray.delete(); faceCascade.delete();
faces.delete();
ajouter_personne_xml("", souris_x, souris_y, "", "");
lecture_xml();
}
;}
function ajouter_personne_xml(nom_face,fx,fy,fw,fh) {
var nomform=nom_face
var nomjfform=""
var prenomform=""
var anneeform=""
var noteform=""
var posxx=fx+fw/2
var posyy=fy+fh/2
var etxx=fx+10
var etyy=fy+fh*2
document.getElementById('ajout').className='invisible';
function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
var nomform = nom_face
var nomjfform = ""
var prenomform = ""
var anneeform = ""
var noteform = ""
var posxx = fx + fw / 2
var posyy = fy + fh / 2
var etxx = fx + 10
var etyy = fy + fh * 2
document.getElementById('ajout').className = 'invisible';
if (!nom_face) {
posxx=fx
posyy=fy
etxx=fx-30
etyy=fy+80
nomform=document.getElementById("nom").value
nomjfform=document.getElementById("nom_jeune_fille").value
prenomform=document.getElementById("prenom").value
anneeform=document.getElementById("annee").value
noteform=document.getElementById("note").value
posxx = fx
posyy = fy
etxx = fx - 30
etyy = fy + 80
nomform = document.getElementById("nom").value
nomjfform = document.getElementById("nom_jeune_fille").value
prenomform = document.getElementById("prenom").value
anneeform = document.getElementById("annee").value
noteform = document.getElementById("note").value
}
// création d'un nouvel élément <personne> dans data_xml
var personne_ = data_xml.createElement("personne");
@ -261,7 +280,7 @@ function ajouter_personne_xml(nom_face,fx,fy,fw,fh) {
};
function modifier_personne() {
mode_saisie="false";
mode_saisie = "false";
afficher_formulaire(this);
document.getElementById('nom').setAttribute('value', nom[ibac]);
document.getElementById('nom_jeune_fille').setAttribute('value', nomjf[ibac]);
@ -269,8 +288,8 @@ function modifier_personne() {
document.getElementById('annee').setAttribute('value', annee[ibac]);
document.getElementById('note').setAttribute('value', note[ibac]);
document.getElementById('titre').setAttribute('value', titre);
menu.style.visibility='hidden';
document.getElementById("enreg").style.visibility="hidden";
menu.style.visibility = 'hidden';
document.getElementById("enreg").style.visibility = "hidden";
alert("Fonction en cours de développement")
};
@ -284,9 +303,9 @@ function position_souris(canvas, evt) {
function tracer_cercle(e) {
document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
document.getElementsByTagName("svg")[0].setAttribute('width',image.naturalWidth);
var pos_x=position_souris(ima_fond, e).x;
var pos_y=position_souris(ima_fond, e).y;
document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
var pos_x = position_souris(ima_fond, e).x;
var pos_y = position_souris(ima_fond, e).y;
for (var i = 0; i < nb_pers; i++) {
var dx = posx[i] - pos_x;
var dy = posy[i] - pos_y;
@ -294,69 +313,78 @@ function tracer_cercle(e) {
var rayon2 = rayon * rayon;
if (dist2 < rayon2) {
ibac=i
ibac = i
can_etiq[i].style.background = "palegreen"
cercle.setAttribute("cx",posx[i]);
cercle.setAttribute("cy",posy[i]);
cercle.setAttribute("r",rayon);
cercle.style.visibility="visible";
// grossir ou diminuer la taille du cercle
// cercle.addEventListener("wheel", function(e) {
// rayon=rayon + (e.deltaY>0 ? -1 : +1);
// cercle.setAttribute("r",rayon );
// } , false);
cercle.setAttribute("cx", posx[i]);
cercle.setAttribute("cy", posy[i]);
cercle.setAttribute("r", rayon);
cercle.style.visibility = "visible";
return
}
};
cercle.style.visibility="hidden";
if (nb_pers!=0) {can_etiq[ibac].style.backgroundColor = "oldlace";}
}
;
cercle.style.visibility = "hidden";
if (nb_pers != 0) {
can_etiq[ibac].style.backgroundColor = "oldlace";
}
};
/**
* montre le formulaire là où l'on clique
* @param e
*/
function afficher_formulaire(e) {
var formul=document.getElementById('ajout')
souris_x = position_souris(ima_fond, e).x ;
var formulaire_ajout = document.getElementById('ajout')
var circle_svg = document.getElementById('circle_svg')
souris_x = position_souris(ima_fond, e).x;
souris_y = position_souris(ima_fond, e).y;
if (souris_y-document.getElementById('ajout').height<0) {sourisy=50};
formul.style.top=souris_y+40+"px";
formul.style.left=souris_x-80+"px";
setTimeout(function () { document.getElementById("nom").focus(); },10);
formul.className='visible';
// document.getElementById('ajout_personne').reset(); // ne fonctioone pas !
if (souris_y - document.getElementById('ajout').height < 0) {
sourisy = 50
}
;
formulaire_ajout.style.top = souris_y + 40 + "px";
formulaire_ajout.style.left = souris_x - (formulaire_ajout.offsetWidth /2) + "px";
setTimeout(function () {
document.getElementById("nom").focus();
}, 10);
formulaire_ajout.className = 'visible';
circle_svg.className = 'visible';
if (mode_saisie) {
document.getElementById('nom').setAttribute('value', "");
document.getElementById('nom').focus();
document.getElementById('nom_jeune_fille').setAttribute('value', "");
document.getElementById('prenom').setAttribute('value', "");
document.getElementById('annee').setAttribute('value', "");
document.getElementById('note').setAttribute('value', "");
}
mode_saisie="true";
mode_saisie = "true";
};
function misajour_xml(){
tit.setAttribute("titx",cant.style.left);
tit.setAttribute("tity",cant.style.top);
function misajour_xml() {
tit.setAttribute("titx", canevas_photo.style.left);
tit.setAttribute("tity", canevas_photo.style.top);
for (var i = 0; i < nb_pers; i++) {
position=data_xml.getElementsByTagName( "position")[i];
position.setAttribute("etx",can_etiq[i].style.left);
position.setAttribute("ety",can_etiq[i].style.top);
};
position = data_xml.getElementsByTagName("position")[i];
position.setAttribute("etx", can_etiq[i].style.left);
position.setAttribute("ety", can_etiq[i].style.top);
}
;
lecture_xml();
} ;
};
function enregistrer_fichier(fichier) {
misajour_xml()
var texte_xml=(new XMLSerializer()).serializeToString(data_xml)
texte_xml=formatXml(texte_xml)
var texte_xml = (new XMLSerializer()).serializeToString(data_xml)
texte_xml = formatXml(texte_xml)
var blob = new Blob([texte_xml], {type: "text/plain;charset=utf-8"});
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fichier);
} else {
var a = document.createElement('a');
if (a.download === '');
if (a.download === '') ;
a.setAttribute('download', fichier);
a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml));
a.style.display = 'none';
@ -367,42 +395,44 @@ function enregistrer_fichier(fichier) {
}
function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
var formatted = '', indent= '';
var formatted = '', indent = '';
tab = tab || '\t';
xml.split(/>\s*</).forEach(function(node) {
if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
xml.split(/>\s*</).forEach(function (node) {
if (node.match(/^\/\w/)) indent = indent.substring(tab.length); // decrease indent by one 'tab'
formatted += indent + '<' + node + '>\r\n';
if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab; // increase indent
if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab; // increase indent
});
return formatted.substring(1, formatted.length-3);
return formatted.substring(1, formatted.length - 3);
}
function image_finale() {
misajour_xml()
var decalx=5;
var decaly=29;
var decalx = 5 + image.offsetLeft;
var decaly = 29 + image.offsetTop;
var can_imf = document.createElement("canvas");
document.body.appendChild(can_imf);
imf_ctx = can_imf.getContext("2d");
can_imf.width=ima_fond.width;
can_imf.height=ima_fond.height;
imf_ctx.drawImage(ima_fond,0,0)
if (titre!=='') {
var taille=titre.length;
hauteur=25
roundedRect(imf_ctx,tx-decalx,ty-decaly,taille*11,hauteur,5,'lightyellow','yellow');
imf_ctx.drawImage(cant, tx-decalx, ty-decaly)
};
can_imf.width = ima_fond.width;
can_imf.height = ima_fond.height;
imf_ctx.drawImage(ima_fond, 0, 0)
if (titre !== '') {
var taille = titre.length;
hauteur = 25
roundedRect(imf_ctx, tx - decalx, ty - decaly, taille * 11, hauteur, 5, 'lightyellow', 'yellow');
imf_ctx.drawImage(canevas_photo, tx - decalx, ty - decaly)
}
for (var i = 0; i < nb_pers; i++) {
var taille=Math.max(nom[i].length,prenom[i].length,nomjf[i].length+5);
hauteur=30
if (nomjf[i].replace(/\t/g, '').length>1) {hauteur=45};
// if (!nomjf[i].charCodeAt(1)==9) {hauteur=45};
roundedRect(imf_ctx,etx[i]-decalx,ety[i]-decaly,taille*7+10,hauteur,15,'oldlace','blue');
imf_ctx.drawImage(can_etiq[i],etx[i]-decalx,ety[i]-decaly)
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
hauteur = 30
if (nomjf[i].replace(/\t/g, '').length > 1) {
hauteur = 45
}
roundedRect(imf_ctx, etx[i] - decalx, ety[i] - decaly, taille * 7 + 10, hauteur, 15, 'oldlace', 'blue');
imf_ctx.drawImage(can_etiq[i], etx[i] - decalx, ety[i] - decaly)
}
var a = document.createElement('a');
if (a.download === '');
if (a.download === '') ;
a.setAttribute('download', enreg_noms);
a.setAttribute('href', can_imf.toDataURL("image/png").replace("image/png", "image/octet-stream"));
a.style.display = 'none';
@ -411,7 +441,7 @@ function image_finale() {
document.body.removeChild(a);
document.body.removeChild(can_imf);
function roundedRect(ctx, x, y, width, height, radius ,couleur_fond ,couleur_trait) {
function roundedRect(ctx, x, y, width, height, radius, couleur_fond, couleur_trait) {
ctx.beginPath();
ctx.strokeStyle = couleur_trait;
ctx.moveTo(x, y + radius);
@ -430,7 +460,53 @@ function image_finale() {
}
}
/******************************************
* détection de visages avec openCV
******************************************/
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js est chargé !';
console.info('OpenCV.js est chargé !');
}
function detection_de_visages() {
src = cv.imread(ima_fond);
gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
chargement_haarcascade();
}
function chargement_haarcascade() {
var reader_haar = new FileReader();
reader_haar.onload = function (ev) {
function str2ab(text) {
return new TextEncoder().encode(text);
}
faceCascadeFile = fichier_xml.name;
let data = str2ab(reader_haar.result)
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
detect_faces();
};
reader_haar.readAsText(fichier_xml);
}
function detect_faces() {
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load(faceCascadeFile);
// detect faces
let msize = new cv.Size(0, 0);
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.log("Il y a " + faces.size() + " visage(s)")
for (let i = 0; i < faces.size(); ++i) {
ajouter_personne_xml("nom_" + parseInt(i) + " ", faces.get(i).x, faces.get(i).y, faces.get(i).width, faces.get(i).height)
}
src.delete();
gray.delete();
faceCascade.delete();
faces.delete();
lecture_xml();
;
}

36
photo_mem.html
View File

@ -22,40 +22,44 @@ Licence AGPL v3.0+
<main>
<div id="actions">
<input id="fichiers" multiple type="file" class="cotecote" style="display:none"/>
<input id="fichiers" multiple type="file" class="cotecote" value="zizou.png"/>
<button id="bouton_image" onclick="fichiers.click()" title="Charger une image et le XML associé">Choix de la
photo
</button>
<button id="detection" onclick="detection_de_visages()" title="Détecter les visages">détection visages
</button>
<input id="save_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()"/>
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div>
<div style="position: relative; ">
<img src="" id="ima_fond" style="position: absolute; left: 0; top: 0; z-index: 0;">
</div>
<svg class="invisible" style="position: absolute" ;>
<!-- cercle indiquant la position où on a cliqué-->
<svg id="circle_svg" class="invisible" style="position: absolute" ;>
<circle id="cirsvg" cx="30" cy="30" r="28"/>
</svg>
<div id="ajout" class="invisible" style="position: relative; z-index: 1;">
<form name="ajout_personne" id="ajout_personne">
<!-- formulaire d'ajout ou de modification d'une personne-->
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
<form name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
<h2 class="title is-2">
NOUVELLE PERSONNE
</h2>
Nom : <input type="text" name="nom" id="nom" autofocus><BR>
Née : <input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
Prénom : <input type="text" name="prénom" id="prenom"><BR>
Année : <input type="text" name="année" id="annee"><BR>
Note : <input type="text" name="note" id="note"><BR>
Titre photo : <input type="text" name="titre" id="titre"><BR>
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
<label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
<label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
<input type="reset" id="enreg" value="Ajouter"
onClick=ajouter_personne_xml("",souris_x,souris_y,"","");lecture_xml();>
<input type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
<input id="enreg" type="reset"value="Ajouter"
onClick=envoi_formulaire_ajout()>
<input id="reset" type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
</form>
</div>
<!-- photo de fond-->
<img src="" id="ima_fond" >
<div id="menu_modif" class="invisible">
<div id="modifier" onClick="modifier_personne();">modifier</div>
<div id="supprimer" onClick="supprimer_personne();menu.style.visibility='hidden';">supprimer</div>

56
style_photomem.css
View File

@ -1,10 +1,12 @@
body{
body {
background: #ccc;
}
main{
main {
width: 80%;
margin: 0 auto;
}
circle {
fill: transparent;
stroke: black;
@ -12,9 +14,8 @@ circle {
}
#bouton_image {
background-color: blue;
background-color: #2266cb;
color: white;
height: 30px;
}
#menu_modif {
@ -31,7 +32,7 @@ circle {
}
#ajout {
border: 2px solid red;
border: 2px solid #2266cb;
border-radius: 10px;
top: 100px;
left: 200px;
@ -39,17 +40,23 @@ circle {
padding-bottom: 0.5em;
padding-left: 1em;
background-color: Azure;
width: 230px;
width: 24em;
}
#ajout label {
width: 10em;
display: inline-block;
padding-right: 1em;
}
#ajout input[type=text] {
border: solid 1px cadetblue;
}
#ajout input:focus {
border: solid 2px green;
}
.cotecote {
display: inline;
}
.visible {
visibility: visible;
}
@ -60,16 +67,17 @@ circle {
.etiq {
background-color: oldlace;
border: 1px solid blue;
border: 1px solid #2266cb;
border-radius: 10px;
position: absolute;
font-family: Arial;
font-size: 13px;
left: -200px;
top: 100px;
padding: 1em;
}
.tit {
.titre {
background-color: LightYellow;
border: 2px solid Yellow;
border-radius: 5px;
@ -78,10 +86,32 @@ circle {
top: 100px;
}
#actions button, #actions input {
#actions button,
#actions input,
#ajout button,
#enreg, #reset {
background: cadetblue;
border-radius: 3px;
border: 0;
cursor: pointer;
padding: 1em 2em;
}
#actions button:hover,
#actions input:hover,
#ajout button:hover,
#enreg:hover, #reset:hover {
background: #275d5f;
cursor: pointer;
}
#fichiers {
display: none;
}
#ima_fond {
position: absolute;
left: 2em;
top: 11em;
z-index: -1;
}