Merge pull request justadudewhohacks#557 from naah69/master

add the way that can upload image to predict

Author: justadudewhohacks

examples/examples-browser/public/js/imageSelectionControls.js

@@ -10,6 +10,13 @@ async function loadImageFromUrl(url) {
   updateResults()
 }
 
+async function loadImageFromUpload() {
+    const imgFile = $('#queryImgUploadInput').get(0).files[0]
+    const img = await faceapi.bufferToImage(imgFile)
+    $('#inputImg').get(0).src = img.src
+    updateResults()
+}
+
 function renderImageSelectList(selectListId, onChange, initialValue, withFaceExpressionImages) {
   let images = [1, 2, 3, 4, 5].map(idx => `bbt${idx}.jpg`)
 

examples/examples-browser/public/styles.css

@@ -73,4 +73,12 @@
 
 #facesContainer canvas {
   margin: 10px;
+}
+
+input[type="file"]::-webkit-file-upload-button {
+    background: #26a69a;
+    border: 1px solid gray;
+    cursor: pointer;
+    color: #fff;
+    border-radius: .2em;
 }

examples/examples-browser/views/ageAndGenderRecognition.html

@@ -35,6 +35,7 @@
       >
         Ok
       </button>
+      <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <!-- image_selection_control -->
     </div>
 

examples/examples-browser/views/bbtFaceRecognition.html

@@ -48,6 +48,7 @@
         >
           Ok
         </button>
+        <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <div id="image_selection_control"></div>
       <!-- image_selection_control -->
 

examples/examples-browser/views/faceDetection.html

@@ -35,6 +35,7 @@
       >
         Ok
       </button>
+      <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <!-- image_selection_control -->
     </div>
 

examples/examples-browser/views/faceExpressionRecognition.html

@@ -35,6 +35,7 @@
       >
         Ok
       </button>
+      <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <!-- image_selection_control -->
     </div>
 

examples/examples-browser/views/faceExtraction.html

@@ -45,6 +45,7 @@
       >
         Ok
       </button>
+      <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <!-- image_selection_control -->
     </div>
 

examples/examples-browser/views/faceLandmarkDetection.html

@@ -35,6 +35,7 @@
       >
         Ok
       </button>
+      <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()" accept=".jpg, .jpeg, .png">
       <!-- image_selection_control -->
     </div>