Création d'une image vue de face
Titre : 2024-04-18-22h04 Tycho - Calque : 18042024
Proposée par GO_Newton
Lieu d'observation : Héry | Date observation : 18-04-2024 22:04:00
Echantillonnage : 0.1866 "/px | Taille Lune : 9611 px | Sous Point Terrestre LONG / LAT : 3.45 / -4.18 ° | NP : 20.21 °
Cette page permet de créer une image à partir de l'image initiale comme si cette dernière avait été prise de face i.e. comme si son centre était situé au centre de la face visible de la Lune. Il faut d'abord créer une image initiale sur laquelle on pourra appliquer éventuellement un post-traitement pour l'améliorer.
';
const win = window.open();
win.document.open();
win.document.write( page );
win.document.title = "Image vue de face";
win.document.close();
document.getElementById("svg_crtl").style.visible = "hidden";
}
document.getElementById("snapshot").addEventListener( 'click', function(){Snapshot()}, false );
// Mise enplace des referentiels Lune
import * as THREE from '../script/threejs/threejs-master-mod/build/three.module.js';
let satelliteLune ;
const progress = document.querySelector(".progress");
// creer la Lune dans le référentiel lunaire 3D
function creerLune( scene) { // uniquement repere
// remarque : vu du dessus ( cote positif des coord), la rotation positive selon un axe se fait dans le sens inverse des aiguilles d'une montre (sens trigo) ...
// parametres
// Pour rotation vers point centrale image
this.centre_image_Lg = new THREE.Points(); //
scene.add ( this.centre_image_Lg );
this.centre_image_Lat = new THREE.Points();
this.centre_image_Lg.add(this.centre_image_Lat);
}// fin fonction creerLune
const scene = new THREE.Scene();
const lune = new creerLune ( scene ); //
// fin creation repere Lune
scene.updateMatrixWorld(); //
function convRadDeg(rad){
return rad/Math.PI*180;
}
function convDegRad(deg){
return deg/180*Math.PI;
}
function relative_position ( obj_locale, obj_ascendant){ // donne la position d'un objet // autre
let v = new THREE.Vector3(); // vecteur retour
obj_locale.localToWorld(v);
obj_ascendant.worldToLocal(v);
return v;
}
const precision = 8;
function start(fct){
document.getElementById('fieldPost').disabled = true;
document.getElementById('generation').disabled = true;
document.getElementById('cr').scrollTo({ top: 0, behavior: 'auto' });
progress.style.setProperty("--progress", "0%");
setTimeout(fct, 400) ;
}
// appel des fct pricipales. Tempo pour permettre l'écriture du message avant traitement du canvas (qui bloque l'affichage sinon)
document.getElementById('creation').addEventListener('click',function(){ document.getElementById('cr').innerHTML = "Calcul des dimensions de l'image finale ...
"+document.getElementById('cr').innerHTML;
start(creation);} , false);
document.getElementById('adouciss').addEventListener('click',function(){ document.getElementById('cr').innerHTML = "Adoucissement image ...
"+document.getElementById('cr').innerHTML;
start(smooth);} , false);
const angle_rad_ref = -0.60630469286255;
const cosa = Math.cos (-angle_rad_ref);
const sina = Math.sin (-angle_rad_ref);
function recherche_coordIO(x,y){// recherche coord du point 2D dans l'Image d'Origine à partir d'un point issu de la projection 2D dans le repere SEP de la carte de ref
// x et y dans le repere SEP 2D 0,0 au centre et la largeur est négative à GAUCHE , la hauteur est négative EN BAS !
// se placer dans la carte SEP 2D mais avec haut gauche = 0,0
let x_hg = x + rayonLunePX ;
let y_hg = rayonLunePX - y;//console.log ("x_hg",x_hg,"y_hg",y_hg)
// coord Carte_ref du point / centre de la carte
let xl_c = - EG_cx_ref + x_hg;
let yl_c = EG_cy_ref - y_hg;//console.log ("xl_c",xl_c,"yl_c",yl_c)
// matrice de rotation pour orienter le point comme dans l'image de départ
let xlr_c = Math.cos (angle_rad_ref)*xl_c - Math.sin (angle_rad_ref)*yl_c;
let ylr_c = Math.sin (angle_rad_ref)*xl_c + Math.cos (angle_rad_ref)*yl_c;
// se placer par rapport au point haut gauche de du cadre CARTE REF dans l'équivalent Cadre de l'image
let xlr_ech = xlr_c + EG_largeur_ref/2 ;
let ylr_ech = - ylr_c + EG_hauteur_ref/2;
// mettre à l'échelle
let rap = larg_image/EG_largeur_ref;
// coord dans l'image d'origine
let xlr_ech_io = xlr_ech*rap;
let ylr_ech_io = ylr_ech*rap;
//console.log ( "X_IO ", xlr_ech_io, "Y_IO ", ylr_ech_io );
return {"X_IO" : xlr_ech_io, "Y_IO" : ylr_ech_io };// coord du point cible dans l'image dans le repere image d'origine avec coord 0 = haut,gauche
}
let Ptest2 = new THREE.Points();
lune.centre_image_Lat.add(Ptest2);
function testPointRC (vect){// permet de trouver les coord cart / au repere global
Ptest2.position.set( vect.x, vect.y, vect.z );
// position du point dans mesh
// d'abord update
scene.updateMatrixWorld(); //
let vio = new THREE.Vector3(); // vecteur retour
Ptest2.localToWorld(vio);
return vio;
}
// fonction pour obtenir les coordonnées 3D ds le centre_image
function GetPointIO(x,y) {// x, y = coord point dans carte REF, repere centré !!!!!!!
// on rechecherche les coordonnees du point dans le ref CARTE REF CENTRE
let latPoint = Math.asin( y/rayonLunePX ).toFixed(precision);// latitude / centre image (i.e.point SEP après rotation)
let longPoint = Math.asin( x/(rayonLunePX*Math.cos(latPoint))).toFixed(precision) ;// longitude / centre image (i.e. point SEP après rottion)
// Le point n'est pas sur la surface de la Lune !
if (isNaN(latPoint) || isNaN(longPoint) ) {
return null;
}
// passage en cartesien pour le point choisi / Repere Centré)
let vecteur3RC = get_Cartesien( longPoint, latPoint, rayonLunePX );
//console.log( "vecteur3RC", vecteur3RC,x,y);
// calcul X,Y,Z Point dans le repere REF SEP (pour le mesh SEP, SEP est au milieu, c'est "scene")
let vSEP = testPointRC( new THREE.Vector3( vecteur3RC.x , vecteur3RC.y , vecteur3RC.z ) );
//console.log( "vSEP", vSEP);
if( vSEP.x < 0) //on est de l'autre côté de la Lune ...
return null;
// puis recheche point 2D dans l'image d'origine
return recherche_coordIO(vSEP.y,vSEP.z);
}
// ------------------------------------------------------------------------------------------------------------
function recherche_coordRef(x,y){// recherche coord du point 2D dans la carte Lunaire de ref (projection de la 3D sur l'écran)
// coord local du point /centre de l'image : la largeur est négative à GAUCHE , la hauteur est négative EN BAS ! : on prend - l'angle
let xl_c = x - larg_image/2 ;
let yl_c = haut_image/2 - y;
// matrice de rotation pour orienter le point comme dans la carte de ref
let xlr_c = cosa*xl_c - sina*yl_c;
let ylr_c = sina*xl_c + cosa*yl_c;
// mettre à l'échelle
let rap = EG_largeur_ref/larg_image;
let xlr_ech = xlr_c*rap;
let ylr_ech = ylr_c*rap;
// se placer par rapport au point haut gauche de la carte ref
let xlr_ech_ref = EG_cx_ref + xlr_ech ;
let ylr_ech_ref = EG_cy_ref - ylr_ech ;
//console.log ( "X_REF ", xlr_ech_ref, "y_REF ", ylr_ech_ref );
return {"X_REF_C" : xlr_ech_ref - rayonLunePX, "Y_REF_C" : rayonLunePX - ylr_ech_ref };// coord du point cliqué dans l'image mais dans le repere carte de référence avec coord 0 = centre image
}
let Ptest = new THREE.Points();
scene.add(Ptest);
function testPointCentreImage (vect){// permet de trouver les coord caresiennes / au repere centre_image
Ptest.position.set( vect.x, vect.y, vect.z );
// position du point dans mesh
// d'abord update
scene.updateMatrixWorld(); //
let vci = relative_position(Ptest, lune.centre_image_Lat);
//console.log ("Ptest dans centre_image", vci);
return vci;
}
// fonction pour obtenir les coordonnées 3D ds le centre_image
function GetPoint3D(x,y) {// x, y = coord point image, inversion coord !!!!!!!
let coord_ref = recherche_coordRef(x, y);// recherche coord du point équivalent dans ref carte lunaire de référence pour cette image (repere RDEP) par rapport au 0 de cette dernière
//console.log( coord_ref);
let latPoint = Math.asin( coord_ref.Y_REF_C/rayonLunePX ).toFixed(precision);// latitude / centre image (i.e.point SEP après rotation)
let longPoint = Math.asin( coord_ref.X_REF_C/(rayonLunePX*Math.cos(latPoint))).toFixed(precision) ;// longitude / centre image (i.e. point SEP après rottion)
// Le point n'est pas sur la surface de la Lune !
if (isNaN(latPoint) || isNaN(longPoint) ) {
return null;
}
// passage en cartesien pour le point choisi / RDEP (pour le mesh SEP est au milieu)
let vecteur3DEP = get_Cartesien( longPoint, latPoint, rayonLunePX );
//console.log( "vecteur3D", vecteur3DEP);
// calcul X,Y,Z Point dans le ref du centre_image
return testPointCentreImage( new THREE.Vector3( vecteur3DEP.x , vecteur3DEP.y , vecteur3DEP.z ) );
}
function get_Cartesien( lg, lat, rayon){
let x = rayon*Math.cos(lg)*Math.cos(lat);
let y = rayon*Math.sin(lg)*Math.cos(lat);
let z = rayon*Math.sin(lat);
return {'x' : x, 'y': y, 'z' : z} ;
}
function color_image_3D(x,y){
return( [idt[x * (canvas.width * 4) + y * 4 ], idt[x * (canvas.width * 4) + y * 4 + 1] , idt[x * (canvas.width * 4) + y * 4 + 2], idt[x * (canvas.width * 4) + y * 4 + 3]] );
}
let idtpC = null; // image data du canvas résultat
let idtpCW = null ; // image data de travail
let idtpCStorage = null ; // mem idtpC issu création
let min_c, max_c, min_l, max_l; // min max des points projetés sur le canvas résultat
let largeur_base, hauteur_base; // largeur, hauteur final du canvas résultat (sans marge)
function creation() {
// recherche coord du point central équivalent dans ref carte lunaire de référence pour cette image (repere scene/SEP) par rapport au 0 de cette dernière
let coord_ref = recherche_coordRef(canvas.width/2,canvas.height/2);
console.log ("coord_ref",coord_ref);
// Lat et Long du point centrale
let latPoint = Math.asin( coord_ref.Y_REF_C/rayonLunePX ).toFixed(precision);// latitude / centre image (i.e.point SEP après rotation)
let longPoint = Math.asin( coord_ref.X_REF_C/(rayonLunePX*Math.cos(latPoint))).toFixed(precision) ;// longitude / centre image (i.e. point SEP après rottion)
if (isNaN(latPoint) || isNaN(longPoint) ) {
alert ("Le centre de la carte n'est pas sur la surface de la Lune !"); return;
}
console.log("lat, long",latPoint/Math.PI*180,longPoint/Math.PI*180);
// pour info, avant rotation du repere centre_image
console.log( "Coord centre avant rotation", get_Cartesien( longPoint, latPoint, rayonLunePX ) );
// on fait la rotation pour que l'axe x de centre_image soit diriger vers le centre de l'image -> la projection de la sphere se faite sur les coord y et z
lune.centre_image_Lg.rotation.z = longPoint;
lune.centre_image_Lat.rotation.y = -latPoint;
scene.updateMatrixWorld(); //
console.log("centre dans repere centre pour verif", GetPoint3D(canvas.width/2, canvas.height/2)); // pour verif
let dim=2*rayonLunePX; // on commence avec la largeur de la Lune référence ....
let l,c,vCI,p, co={"l":0,"h":0};// indice largeur,hauteur , point brut 3D projeter, point 2D brut , indice dans l'image data
let coordP;
min_c = dim, max_c = 0, min_l = dim ,max_l=0; //l:ligne, c: colonne, pour recherche du rectangle incluant les points projetés dans l'image finale
l=0;
while (l < canvas.height ){ // nb ligne : correspond à y
c=0;
while ( c < canvas.width ){ // height egal le nb de colonnes à z
// recheche coord 3D du point dans repere centre_image (0,0 au centre, negatif pour x vers la gauche, negatif pour z vers le bas)
vCI = GetPoint3D(c,l);//if( titi) {console.log("vCI",vCI); titi--;}
// le point n'est sur la surface de la Lune : on passe
if( !vCI ) {
//console.log("vCI",vCI);
c ++;
continue;
}
// se mettre dans le repere de canvas 0,0 = haut, gauche
// co.l = ( vCI.y + rayonLunePX ); // largeur = nb colonne ATTENTION : provoque effet miroir.
co.l = ( - vCI.y + rayonLunePX ); // largeur = nb colonne.
co.h = ( - vCI.z + rayonLunePX ); // hauteur = nb ligne
//if( titi) {console.log ("co.l",co.l,"co.h",co.h); titi--;}
if( min_c > Math.floor(co.l) ) min_c = Math.floor(co.l);
if( min_l > Math.floor(co.h) ) min_l = Math.floor(co.h);
if( max_c < Math.ceil(co.l) ) max_c = Math.ceil(co.l);
if( max_l < Math.ceil(co.h) ) max_l = Math.ceil(co.h);
c ++;
}
l ++ ;
}
console.log("Bornes après 1er estimation : min_c", min_c,"max_c", max_c,"min_l", min_l,"max_l", max_l);
//********* cette fois ci, on part de l'image finale pour que tous les points de cette image soient remplis
// l'image V3 est comme dans un miroir en x, il faut inverser les bornes de la zone de recherche
//let mem = min_c;
//min_c = dim - max_c;
//max_c = dim - mem;
let vIO=null;
let okp=0; // les pts effectement remplis
let totp=0; // ensemble des points scannés
console.log("point 0,0", GetPointIO(0,0) ); // pour verif
idtpC = ctxC.createImageData(max_c-min_c, max_l-min_l );
l=min_l;
let r = 8; // nb tour avant pause : plus la pause est longue, plus c'est rapide mais progression moins fluide
// loop : permet d'avoir des poses pour affichage progression
let s ; // compteur
document.getElementById('cr').innerHTML = "Création de l'image vue de face ...
"+document.getElementById('cr').innerHTML;
(function loop() {
setTimeout(() => {
for( s=0; s < r; s ++){
c=min_c;
while ( c <= max_c){ // height egal le nb de ligne à z
// recheche coord 2D du point dans repere Image d'Origine
// on se replace dans le repere centre avant appal à la fonction de correspondance avec l'Image Origine
vIO = GetPointIO(-c + rayonLunePX, rayonLunePX - l);//if(vIO) console.log("vIO",vIO);
// le point n'est pas sur l'image de départ : on passe
if( !vIO ) {
//console.log("vIO",vIO);
c ++;
continue;
}
vIO.X_IO=Math.round(vIO.X_IO);
vIO.Y_IO=Math.round(vIO.Y_IO);
coordP = (l-min_l)*(max_c - min_c)* 4 + (max_c - c)*4;//max_c - c au lieu de c - min_c pour contrer effet miroir en x
// prendre couleur du point image pour mettre sur image centrée, ATTENTION opacité ici de 0 à 255;
if( vIO.X_IO >=0 && vIO.X_IO < larg_image && vIO.Y_IO >=0 && vIO.Y_IO < haut_image ){
p = color_image_3D(vIO.Y_IO,vIO.X_IO,ctx);
//console.log ( "point ok ", p );
okp++;
//if (!(i%100)) console.log("coordP",coordP);
idtpC.data[ coordP ] = p[0];
idtpC.data[ coordP + 1 ] = p[1];
idtpC.data[ coordP + 2 ] = p[2];
idtpC.data[ coordP + 3 ] = 255;
}
totp++;
c ++;
} // fin while
if( l < max_l )
l++;
else
break;
}// fin for
if( l < max_l || ( l == max_l && s == r ) ){ // il se peut que l = max_l pas fait si s = r or l = max_l est valide
progress.style.setProperty("--progress", `${Math.ceil((l-min_l)/(max_l - min_l)*100)}%`);
loop();
}
else {
// nouveau Cadre
largeur_base = (max_c-min_c) ;
hauteur_base = (max_l-min_l) ;
// on reajuste le canvas de sortie
canvasC.width = 20 + largeur_base ;
canvasC.height = 20 + hauteur_base ;
// on créer l'image avec une bordure de 10
ctxC.putImageData(idtpC, 10, 10 );
// sauvegarde idtpC pour cgt couleur fond
idtpCStorage = idtpC;
ctxC.globalCompositeOperation = 'destination-over';
ctxC.fillStyle = couleur_fond ;
ctxC.fillRect(0, 0, canvasC.width, canvasC.height);
console.log('totp', totp,'okp',okp);
//alert("Fin du processus de création de l'image !");
// donner la possibilté de post-traiter
document.getElementById('fieldPost').disabled = false;
document.getElementById('generation').disabled = false;
document.getElementById('cr').innerHTML = "Image vue de face créée !!
"+document.getElementById('cr').innerHTML;
document.getElementById('cr').scrollTo({ top: 0, behavior: 'auto' });
}
}, 1);
})();
}
function smooth (){ // réduction du crénelage
let k,z,y;
let ap;// points adjacent
let pc;// nb de point pris en compte dans interpolation (ici max 4)
let idc; // index point couranrcourant
// on recupere le nouveau data image
let dataTaille = (largeur_base)*(hauteur_base)*4;
idtpC = ctxC.getImageData( 10, 10, largeur_base, hauteur_base );
idtpCW = idtpCStorage;
let dist_coul = 0;
let nb_pt=0;// nombre points traité
let nb_ptv=0; // nombre de point non traité
function appli_ponderation(coef){ // coef : poucentage conservé des valeurs couleurs du point central
for ( z = 0; z < 3; z++ ){ // mettre à jour le point d'indice k .... k+2, pour chaque couleur, avec rapport 2/3 1/3
idtpCW.data[ k+z ] = Math.round( idtpC.data[k+z]*coef + (1-coef)*(idtpC.data[ ap[0].id +z]*ap[0].poids*1/pc + idtpC.data[ ap[1].id +z]*ap[1].poids*1/pc + idtpC.data[ ap[2].id +z]*ap[2].poids*1/pc + idtpC.data[ ap[3].id +z]*ap[3].poids*1/pc +
idtpC.data[ ap[4].id +z]*ap[4].poids*1/pc + idtpC.data[ ap[5].id +z]*ap[5].poids*1/pc + idtpC.data[ ap[6].id +z]*ap[6].poids*1/pc + idtpC.data[ ap[7].id +z]*ap[7].poids*1/pc) );
}
nb_pt++;// nb adoucis dans cette passe
}
// loop : permet d'avoir des poses pour affichage progression
let s = 4; // nb x 100
let taillePaq = Math.ceil(dataTaille/(100*s)); // on avance par paquet d'un 200ième;
let numPaq = 0;
let deb=0; // indice debut paquet
(function loop() {
setTimeout(() => {
//console.log("numPaq", numPaq,"taillePaq", taillePaq,"(numPaq+1)*taillePaq",(numPaq+1)*taillePaq);
//console.log("idtpC.data[ 0.. ]",idtpC.data[ 8 ],idtpC.data[ 9 ],idtpC.data[ 10 ],idtpC.data[ 11 ])
deb = numPaq*taillePaq*4; // pour redemarrage avec un pas de 4 après le précédent paquet
for(k = deb ; k < Math.min((numPaq+1)*taillePaq*4,dataTaille) ; k += 4) {
//if( numPaq == 200 ) console.log(k);
if( idtpC.data[ k + 3 ] == 255 ){// on travaille sur les points interpolés
//ap=[{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0}];
ap=[{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0},{"id":0,"poids":0}];
pc = 0;
// index point du dessus
idc = k - largeur_base*4;
if ( idc >= 0 && idtpC.data[ idc + 3 ] == 255 ) { ap[0].id = idc ; ap[0].poids = 1; pc++;};
// index point dessous
idc = k + largeur_base*4
if ( idc < dataTaille && idtpC.data[ idc + 3 ] == 255) { ap[1].id = idc ; ap[1].poids = 1; pc++;};
// index point gauche
idc = k - 4;
if ( idc >= 0 && idtpC.data[ idc + 3 ] == 255 ) { ap[2].id = idc ; ap[2].poids = 1; pc++;};
// index point droit
idc = k + 4;
if ( idc < dataTaille && idtpC.data[ idc + 3 ] == 255 ) { ap[3].id = idc ; ap[3].poids = 1; pc++;};
// pour niveau faible et moyen, on étend la zone aux points des angles mais pondérés à 50% : image plus douce
if ( document.querySelector("input[name=adouc]:checked").value == 1 || document.querySelector("input[name=adouc]:checked").value == 2 ){
// index point du dessus g
idc = k - largeur_base*4 - 4;
if ( idc >= 0 && idtpC.data[ idc + 3 ] == 255 ) { ap[4].id = idc ; ap[4].poids = 0.5; pc +=0.5;};
// index point dessous g
idc = k + largeur_base*4 - 4;
if ( idc < dataTaille && idtpC.data[ idc + 3 ] == 255) { ap[5].id = idc ; ap[5].poids = 0.5; pc +=0.5;};
// index point du dessus d
idc = k - largeur_base*4 + 4;
if ( idc >= 0 && idtpC.data[ idc + 3 ] == 255 ) { ap[6].id = idc ; ap[6].poids = 0.5; pc +=0.5;};
// index point dessous d
idc = k + largeur_base*4 + 4;
if ( idc < dataTaille && idtpC.data[ idc + 3 ] == 255) { ap[7].id = idc ; ap[7].poids = 0.5; pc +=0.5;};
}
// calcul distance couleur servant à smooth
dist_coul = 0;
for ( y=0 ; y < 8; y++ ){
dist_coul += (Math.abs(idtpC.data[k] - idtpC.data[ ap[y].id ]) + Math.abs(idtpC.data[k+1] - idtpC.data[ ap[y].id +1 ]) + Math.abs(idtpC.data[k+2] - idtpC.data[ ap[y].id +2]) )*ap[y].poids;
};
// moyenne
dist_coul = dist_coul/pc;
switch (document.querySelector("input[name=adouc]:checked").value) {
case "1":
if( Math.abs(dist_coul) >= 110 ) { // si points très diff des autres
appli_ponderation(0.70);
}
else
nb_ptv ++;
break;
case "2":
if( Math.abs(dist_coul) >= 75 ) { // si points très diff des autres
appli_ponderation(0.6);
}
else
nb_ptv ++;
break;
case "3" :
if( Math.abs(dist_coul) >= 60 ) { // si points très diff des autres
appli_ponderation(0.45);
}
else
nb_ptv ++;
break;
default: break;
}
}// fin si points non vides
}// pour tous points du paquet
if( numPaq != 100*s ){// on n'a pas fini la progression on continue
numPaq ++;
progress.style.setProperty("--progress", numPaq/s+"%");
loop();
}
else { // on a parcourru tous les points
progress.style.setProperty("--progress", numPaq/s+"%");
console.log("nb points non traités",nb_ptv);
console.log("nb points adoucis",nb_pt);
ctxC.putImageData(idtpCW, 10 , 10 );
ctxC.globalCompositeOperation = 'destination-over';
ctxC.fillStyle = couleur_fond ;
ctxC.fillRect(0, 0, canvasC.width, canvasC.height);
// sauvegarde idtpC pour cgt couleur fond
idtpCStorage = idtpCW;
document.getElementById('cr').innerHTML = "Adoucissement de l'image effectée avec succès : Nb de points adoucis : "+nb_pt+" !!
"+document.getElementById('cr').innerHTML;
document.getElementById('cr').scrollTo({ top: 0, behavior: 'auto' });
document.getElementById('fieldPost').disabled = false;
document.getElementById('generation').disabled = false;
}
}, 1);
})();
}
/*window.onbeforeunload = function () {
ctxC.clearRect(0, 0, canvasC.width, canvasC.height);
};*/
// gestion couleur fond
const couleurs = document.querySelectorAll(".divCouleur");
couleurs.forEach(function (couleur) {
couleur.addEventListener("click", function(event) {
// on recupere la couleur du fond
couleur_fond = event.currentTarget.style.getPropertyValue("background-color");
//console.log(couleur_fond);
document.querySelector(".divCouleurSelect").classList.remove("divCouleurSelect"); // on deselectionne le choix précédent
event.currentTarget.classList.toggle("divCouleurSelect"); // on met en évidence le choix nouveau
// restitution idtpC
if( idtpCStorage ){
idtpC = idtpCStorage;
ctxC.clearRect(0, 0, canvasC.width, canvasC.height);
ctxC.putImageData(idtpC, 10, 10 );
ctxC.globalCompositeOperation = 'destination-over';
ctxC.fillStyle = couleur_fond ;
ctxC.fillRect(0, 0, canvasC.width, canvasC.height);
}
else{
if( !idtpC ) {// on est à l'init, on peut changer le fond
ctxC.clearRect(0, 0, canvasC.width, canvasC.height);
ctxC.globalCompositeOperation = 'destination-over';
ctxC.fillStyle = couleur_fond ;
ctxC.fillRect(0, 0, canvasC.width, canvasC.height);
}
}
}
);
});