'Fonctionne_pour_les_images_en_local'

certif.cer

+-----BEGIN CERTIFICATE-----
+MIIEjTCCA3WgAwIBAgIRAOYPhbY9iPOmCgAAAAE3i9kwDQYJKoZIhvcNAQELBQAw
+RjELMAkGA1UEBhMCVVMxIjAgBgNVBAoTGUdvb2dsZSBUcnVzdCBTZXJ2aWNlcyBM
+TEMxEzARBgNVBAMTCkdUUyBDQSAxQzMwHhcNMjIwMjE3MTIxNTQxWhcNMjIwNTEy
+MTIxNTQwWjAWMRQwEgYDVQQDDAsqLmdvb2dsZS5mcjBZMBMGByqGSM49AgEGCCqG
+SM49AwEHA0IABMhkc2d2t47PWJmLHfmTrzwkd+h0GFWOUEsku/lr8+Wv3GLHzS8x
+BGYzGHQaCV8fKQEkXzEqKFesMOeUIz2ml9ajggJvMIICazAOBgNVHQ8BAf8EBAMC
+B4AwEwYDVR0lBAwwCgYIKwYBBQUHAwEwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQU
+CPuy6aYQAZN9+K+DJi2gLO+G6ekwHwYDVR0jBBgwFoAUinR/r4XN7pXNPZzQ4kYU
+83E1HScwagYIKwYBBQUHAQEEXjBcMCcGCCsGAQUFBzABhhtodHRwOi8vb2NzcC5w
+a2kuZ29vZy9ndHMxYzMwMQYIKwYBBQUHMAKGJWh0dHA6Ly9wa2kuZ29vZy9yZXBv
+L2NlcnRzL2d0czFjMy5kZXIwIQYDVR0RBBowGIILKi5nb29nbGUuZnKCCWdvb2ds
+ZS5mcjAhBgNVHSAEGjAYMAgGBmeBDAECATAMBgorBgEEAdZ5AgUDMDwGA1UdHwQ1
+MDMwMaAvoC2GK2h0dHA6Ly9jcmxzLnBraS5nb29nL2d0czFjMy96ZEFUdDBFeF9G
+ay5jcmwwggEEBgorBgEEAdZ5AgQCBIH1BIHyAPAAdQBByMqx3yJGShDGoToJQode
+TjGLGwPr60vHaPCQYpYG9gAAAX8H0wEjAAAEAwBGMEQCIECeqFs6F5IiGhedVyVD
+1WYL9pxckaeRs6dfIYU9oXbIAiBJbMoELXrzCnsmjDNQf98HnCSTiZGh/nKZ9v5t
+zUzAXAB3ACl5vvCeOTkh8FZzn2Old+W+V32cYAr4+U1dJlwlXceEAAABfwfTANwA
+AAQDAEgwRgIhAMAex4H2DB4w18QYLB/7bBmfvb4iU3dG6DIJollmioZxAiEA5cdv
+Fcdubsd6rkzlLCv5MsMffgBiBC/wVhU2aoQJmlcwDQYJKoZIhvcNAQELBQADggEB
+APMahdxMDzh/HKWDdQ8KRnUQ0P3eZW4yeaRt6ctzO+nbS7W8a9N52RzEbsC3KcZT
+1kmnqlc3QbOTKgkIA5YdHyoMSfSxYzB2yi5HEOixs3I7FoIGw6jqFhLS5K/akGEN
+xf82WmHW8g0qQmeq2wbz22yq1mwlixw7+RSywtPhbDByZjhYw9euS1fXa70fbetZ
+seNIbRs8vGJK7bHizE8JN7NwMkBN/3tdfColaet95QYPz7Tk46HpBwRGJ7vFfED6
+or/K8Sm+c5vnKkD6XpeRMEJiF/Ik0DNZJGnFHAnON1onemiz8bZ4Vx346hc2mI9q
+TjHd4bDFS99nMNgS1j2roxc=
+-----END CERTIFICATE-----

index.php

@@ -14,9 +14,12 @@
     <script src="script.js"></script>
     <form  id ="form" action="" method="" enctype="multipart/form-data">
         <h2>Upload Fichier</h2>
-        <div id ="div-ID" >
+        <div id ="div-ID" class="div-photo" >
             <canvas id="canvas" ></canvas>
             <img id="img-ID" src=""  height="150em"/>
+
+            <canvas id="canvas" ></canvas>
+            <img id="img-ID2" src=""  height="150em"/>
         </div>
         <label for="fileUpload">Fichier:</label>
         <input type="file" name="photo" id="fileUpload">

rmbg2.php → removeBackground2.php

 <?php
-// phpinfo();die;
+// phpinfo();
+
+
+define('WHERE_TO_PUT','img_bg');
+define('PATH_TO_BG', "img_bg");
+
+// die;
 require_once "vendor/autoload.php"; 
-// Generated by curl-to-PHP: http://incarnate.github.io/curl-to-php/
-// if($_SERVER["REQUEST_METHOD"] == "POST")
-// {
-//     if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0)
-//     {
-        // $allowed = array("jpg" => "image/jpeg", "png" => "image/png");
-        // $filename = $_FILES["photo"]["name"];
-        // $filetype = $_FILES["photo"]["type"];
+if($_SERVER["REQUEST_METHOD"] == "POST")
+{
+    if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0)
+    {
+        $allowed = array(
+            "jpg" => "image/jpeg", 
+            "png" => "image/png"
+        );
+        $filename = $_FILES["photo"]["name"];
+        $filetype = $_FILES["photo"]["type"];
         
-        // $ext = pathinfo($filename, PATHINFO_EXTENSION);
-        // if(array_key_exists($ext, $allowed))
-        // {
-            $client = new GuzzleHttp\Client();
+        $ext = pathinfo($filename, PATHINFO_EXTENSION);
+        if(array_key_exists($ext, $allowed))
+        {
+            $client = new GuzzleHttp\Client(['verify' => false]);
             $res = $client->post('https://api.remove.bg/v1.0/removebg', [
                 'multipart' => [
                     [
                         'name'     => 'image_file',
-                        'contents' => fopen('img\pierremarque.jpg', 'r')
+                        'contents' => fopen('img/'.$filename, 'r')
                     ],
                     [
                         'name'     => 'size',
@@ -26,14 +34,17 @@ require_once "vendor/autoload.php";
                     ]
                 ],
                 'headers' => [
-                    'X-Api-Key' => 'X-Api-Key:qYXf5PimffLjeH1i5B1rySQw'
+                    'X-Api-Key' => 'qYXf5PimffLjeH1i5B1rySQw'
                 ]
             ]);
 
-            $fp = fopen("no-bg.png", "wb");
+            $fp = fopen('img_bg/'.pathinfo($filename, PATHINFO_FILENAME)."no-bg.png", "wb");
             fwrite($fp, $res->getBody());
-            fclose($fp);
-        // }
-//     }
-// }
+            $data = array(
+                "src" => PATH_TO_BG.DIRECTORY_SEPARATOR.pathinfo($filename, PATHINFO_FILENAME)."no-bg.png"
+            );
+            echo json_encode($data);
+        }
+    }
+}
 ?>
\ No newline at end of file

script.js

 // VARIABLES
 
 const URL_CHECK_ID = 'upload.php';
+const URL_DETOURAGE = "removeBackground2.php" 
 const ID = "img-ID";
 const canva = "canvas";
 const idBtnSubmit = 'btnSubmit';btnSubmit = $("#"+idBtnSubmit);
 
+var src = '';
+
 
 // SCRIPT
 
@@ -27,6 +30,7 @@ $(document).ready(function(){
         })
         .done(function(data){
           console.log(data);
+          src = data['src'];
           $("div#div").empty();
           $("div#div").append(data['message']);
 
@@ -35,6 +39,26 @@ $(document).ready(function(){
           findFaces();
         })
 
+        $.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']);
+      })
+      // $("#img-ID2").attr('src','img_bg\\pierremarqueno-bg.png')
     });
 });
 
@@ -52,11 +76,11 @@ async function findFaces() {
       console.log("faces found")
       console.log(predictions);
       document.getElementById("p-status").innerText += predictions.length+" face(s) found!";
-      // const canvas =  document.getElementById(canva);
-      // canvas.width = img.width;
-      // canvas.height = img.height;
-      // const ctx = canvas.getContext("2d");
-      // ctx.fillStyle = "rgba(250,225,6,0.5)";
+      const canvas =  document.getElementById(canva);
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      ctx.fillStyle = "rgba(250,225,6,0.5)";
       // for (let i = 0; i < predictions.length; i++) 
       // {
       //   const start = predictions[i].topLeft;

style.css

+.div-photo{
+    display : inline
+}
\ No newline at end of file

upload.php

-<?php
+ <?php
 define('PATH_TO_ID', "img");
 
 // Vérifier si le formulaire a été soumis
@@ -34,7 +34,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
                     }
                     else
                     {
-                        move_uploaded_file($_FILES["photo"]["tmp_name"],  PATH_TO_ID."/".$_FILES["photo"]["name"]);
+                        move_uploaded_file($_FILES["photo"]["tmp_name"],  PATH_TO_ID."/".$filename);
                         // echo "Votre fichier a été téléchargé avec succès.";
                         // echo("<br></br>");
                         // echo "taille de la photo : ".$_FILES["photo"]["size"]." octets";