fonctionnel

index.php

@@ -32,6 +32,8 @@
                 <ul>
                     <li id="li-oneface">Un seul visage<span></span></li>
                     <li id="li-format">Format correct<span></span></li>
+                    <li id="li-dimensons">Format correct<span></span></li>
+                    <li id="li-poids">Poids<span></span></li>
                 </ul>
             </div>
             <img name ="im_ID2" id="img-ID2" src=""  height="150em"/>
@@ -50,7 +52,6 @@
                     <input id="btnSubmit" type="submit" name="submit" value="Vérifier" class="btn-form">       
                 </div>
             </form>
-            <button id ="cancel" type="button">Annuler</button>
             <script>
 
                 const inpFile = document.getElementById("fileUpload");
@@ -64,7 +65,7 @@
                         previewImage.setAttribute("src", this.result);
                     });
                     reader.readAsDataURL(file);
-                    //findFaces("img-ID");
+                    // findFaces("img-ID");
                 }
                 inpFile.addEventListener("change", function (){
                     const file = inpFile.files[0];
@@ -76,7 +77,7 @@
                             previewImage.setAttribute("src", this.result);
                         });
                         reader.readAsDataURL(file);
-                        //findFaces("img-ID");
+                        // findFaces("img-ID");
                     }
 
                });

removeBackground2.php

@@ -5,6 +5,7 @@
 define('WHERE_TO_PUT','img_bg');
 define('PATH_TO_BG', "img_bg");
 define('TEMP','temp');
+define('KEY','LeteoyV7qPyWtAJF9Rcxenda');
 
 
 require_once "vendor/autoload.php"; 
@@ -17,6 +18,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
             "png" => "image/png"
         );
         $filename = $_FILES["photo"]["name"];
+        $newfilename = $filename;
         $filetype = $_FILES["photo"]["type"];
         
         $ext = pathinfo($filename, PATHINFO_EXTENSION);
@@ -27,7 +29,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
                 'multipart' => [
                     [
                         'name'     => 'image_file',
-                        'contents' => fopen(TEMP.'/'.$filename, 'r')
+                        'contents' => fopen(TEMP.'/'.$newfilename, 'r')
                     ],
                     [
                         'name'     => 'size',
@@ -35,14 +37,14 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
                     ]
                 ],
                 'headers' => [
-                    'X-Api-Key' => 'LeteoyV7qPyWtAJF9Rcxenda'
+                    'X-Api-Key' => KEY
                 ]
             ]);
             // On supprime l'image intermédiaire
-            $deletefile=unlink(TEMP.'/'.$filename);
+            $deletefile=unlink(TEMP.'/'.$newfilename);
 
             //On crée et stocke l'image détourée
-            $fp = fopen('img_bg/'.pathinfo($filename, PATHINFO_FILENAME)."NO-BG.png", "wb");
+            $fp = fopen('img_bg/'.pathinfo($newfilename, PATHINFO_FILENAME)."NO-BG.png", "wb");
             fwrite($fp, $res->getBody());
             fclose($fp);
 

script.js

 
 // VARIABLES  ===============================================================================
 
-const URL_CHECK_ID = 'upload.php';
+const URL_CHECK_ID = "upload.php";
 const URL_DETOURAGE = "removeBackground2.php";
-const URL_WEB_API = 'web_server.php';
-const URL_CHOOSE_MAIL = 'io.php';
-const URL_END = 'byebye.html';
+const URL_WEB_API = "web_server.php";
+const URL_CHOOSE_MAIL = "io.php";
+const URL_END = "byebye.html";
 
 const timeout = 5000;
 
@@ -14,11 +14,11 @@ const ID_bg = "img-ID2"; var ImgBG;
 const canva = "canvas";
 // console.log($("#"+ID).attr('src'));
 
-const idConsole = "div";var Console;
+const idConsole = "span-status";var Console;
 
 const idFileUpload = "fileUpload"; var inputFileUpload;
 const idCustomFileUpload = "custom-fileUpload"; var btnCustomFileUpload;
-const idBtnSubmit = 'btnSubmit';var btnSubmit;
+const idBtnSubmit = "btnSubmit";var btnSubmit;
 
 const idStatut = "span-status";
 
@@ -32,8 +32,6 @@ var unSeulVisage = false;
 var format_correct = false;
 
 
-
-
 // SCRIPT ====================================================================================
 
 $(document).ready(function(){
@@ -52,14 +50,20 @@ $(document).ready(function(){
 
 
     //Si l'on change la photo, 
-    inputFileUpload.change(function(){unSeulVisage=false;format_correct=false});
+    inputFileUpload.change(function(){
+      unSeulVisage=false;
+      format_correct=false;
+      ImgBG.attr("src","");
+    });
     //Requête pour les vérifications de sécurité & de format
     $("#form").on("submit",function (event) {
         event.preventDefault();
         var formData = new FormData(this);
         console.log(inputFileUpload.attr('filename'));
+        
+      //Requête pour vérifier l'intégrité du fichier, ses dimensions
         $.ajax({
-          //url de la requête
+        
           url: URL_CHECK_ID,
           method: 'POST',
           enctype: 'multipart/form-data',
@@ -82,29 +86,7 @@ $(document).ready(function(){
           Console.empty();
           Console.append(data['message']);
           format_correct = true;
-          //Affichage de la photo
-          // findFaces();
-        if(!errorFormat){
-          $.ajax({
-            //url de la requête
-            url: URL_DETOURAGE,
-            
-            method: 'POST',
-            enctype: 'multipart/form-data',
-            data: formData,
-            cache: false,
-
-            dataType: "json",
-            contentType: false,
-            processData: false
-          })
-          .done(function(data){
-            console.log(data);
-
-            //Affichage de la photo
-            $("#img-ID2").attr('src',data['src']);
-          })
-        }
+          photoDetourage(errorFormat, formData);
       })
     });
     
@@ -155,15 +137,6 @@ $(document).ready(function(){
         }
     })
 
-    //Lorsque l'utilisateur souhaite changer d'image
-    // btnCancel.on('click', function(){
-    //   unSeulVisage = false;
-    //   format_correct = false;
-    //   ImgBG.attr('src',"");
-    //   Img.attr('src',"");
-    //   $("#li-oneface").css('color','black');
-    // });
-  
 
   
 });
@@ -187,14 +160,39 @@ function sendMail(){
   // window.close();
 }
 
+async function photoDetourage(errorFormat, formData){
+  await findFaces(ID);
+  console.log("await")
+        if(!errorFormat){
+          $.ajax({
+            //url de la requête
+            url: URL_DETOURAGE,
+            
+            method: 'POST',
+            enctype: 'multipart/form-data',
+            data: formData,
+            cache: false,
+
+            dataType: "json",
+            contentType: false,
+            processData: false
+          })
+          .done(function(data){
+            console.log(data);
+
+            //Affichage de la photo
+            $("#img-ID2").attr('src',data['src']);
+          })
+        }
+}
 
 async function findFaces(idImage) {
   // btnCustomFileUpload.prop('disabled',true);
+  $("body").css("cursor","wait");
   btnSubmit.prop('disabled',true);
   console.log('_findFaces()');
   const model = await blazeface.load();  
   // const img = ID;
-  console.log(idImage);
   const img = document.getElementById(idImage);
   const predictions = await model.estimateFaces(img, false);
   console.log('_findFaces()');
@@ -240,6 +238,8 @@ async function findFaces(idImage) {
   }
   btnSubmit.prop('disabled',false);
   btnCustomFileUpload.prop('disabled',false);
+  $("body").css("cursor","");
+  // return predictions.length;
 }
 
 function getParameter(url){

upload.php

@@ -12,23 +12,26 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
     {
         $allowed = array(
             "jpg" => "image/jpeg", 
-            "png" => "image/png"
+            "png" => "image/png",
+            "PNG" => "image/PNG"
         );
         $filename = htmlspecialchars(trim($_FILES["photo"]["name"]));// évite les noms de fichiers trop exotiques 
+        $newfilename = $filename;
         $filetype = $_FILES["photo"]["type"];
         $filesize = $_FILES["photo"]["size"];
         $message = "";
         $error = true; 
+        $errorType = "";
 
         // Vérifie l'extension du fichier
         $ext = pathinfo($filename, PATHINFO_EXTENSION);
         if(array_key_exists($ext, $allowed))//die("Erreur : Veuillez sélectionner un format de fichier valide.");
         {
-            // Vérifie la taille du fichier - 5Mo maximum
-            $maxsize = 5 * 1024 * 1024;
+            // Vérifie la taille du fichier - 1 Mo maximum
+            $maxsize = 1 * 1024 * 1024;
             if(!($filesize > $maxsize)) //die("Error: La taille du fichier est supérieure à la limite autorisée.");
             {
-                // Vérifie le type MIME du fichier
+                // Vérifie le type MIME du fichier ATTENTION - VERIFIE SEULEMENT L'EXTENSION
                 if(in_array($filetype, $allowed))
                 {
                     // Vérifie si le fichier existe avant de le télécharger.
@@ -36,7 +39,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
                     {
                         //echo $_FILES["photo"]["name"] . " existe déjà.";
                         $error = false;
-                       move_uploaded_file($_FILES["photo"]["tmp_name"],  PATH_TO_TEMP."/".$filename);
+                        move_uploaded_file($_FILES["photo"]["tmp_name"],  PATH_TO_TEMP."/".$newfilename);
                         $message = $_FILES["photo"]["name"] . " existe déjà.";
                     }
                     else
@@ -51,16 +54,19 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
                 } 
                 else{
                     // echo "Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer."; 
-                    $message = "Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer."; 
+                    $message = "Error: Il y a eu un problème de téléchargement de votre fichier. Le format $filetype n'est pas accepté."; 
+                    $errorType = "MIME";
                 }
             }
             else
             {
                 $message = "Error: La taille du fichier est supérieure à la limite autorisée.";
+                $errorType = "poids_taille";
             }
         }
         else{
             $message = "Erreur : Veuillez sélectionner un format de fichier valide.";
+            $errorType = "format";
         }
     } 
     else{
@@ -68,6 +74,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
         $message = "Error: " . $_FILES["photo"]["error"];
     }
     $data = array(
+        "errorType"=>$errorType,
         "message" => $message,//<--Message qui pourra être affiché
         "error" => $error,//<----- Prend la valeur true (erreur!) ou false (ouf!)
         // "src" => PATH_TO_ID."/".$_FILES["photo"]["name"]