feat: facial recognition

client/src/components/profile-components/Profile.js

@@ -1,44 +1,86 @@
-import React, { createRef, useState } from 'react';
+import React, { createRef, useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import Webcam from 'react-webcam';
 import FileBase64 from 'react-file-base64';
 import ImageUploader from 'react-images-upload';
 import '../../styles/profile-styles/Profile.css';
+import * as faceapi from 'face-api.js';
+const MODEL_URL = '/models'
 
 const videoConstraints = {
   width: 400,
   height: 400,
   facingMode: 'user'
 };
 
+
 const Profile = () => {
+  useEffect(() => {
+    async function load () {
+      await faceapi.loadTinyFaceDetectorModel(MODEL_URL)
+      await faceapi.loadFaceRecognitionModel(MODEL_URL)
+    }
+    load();
+  }, []);
+
+
+
   const currentUser = useSelector(({ user }) => user);
   const [imageSrc, setImageSrc] = useState('');
 
-  const onDrop = picture => {
-    getBase64(picture[0], result => setImageSrc(result));
+  const onDrop = async (picture) => {
+    await getBase64(picture[picture.length-1], result => faceRecog(result));
   };
 
   const webcamRef = createRef(null);
 
   const capture = React.useCallback(() => {
-    setImageSrc(webcamRef.current.getScreenshot());
+    faceRecog(webcamRef.current.getScreenshot());
   }, [webcamRef]);
 
-  function clearImage() {
+  function clearImage () {
     setImageSrc('');
   }
 
-  function getBase64(file, cb) {
+  function getBase64 (file, cb) {
     let reader = new FileReader();
     reader.readAsDataURL(file);
-    reader.onload = function() {
+    reader.onload = function () {
       cb(reader.result);
     };
-    reader.onerror = function(error) {
+    reader.onerror = function (error) {
       console.log('Error: ', error);
     };
   }
+  async function faceRecog (imageSrc) {
+    const image = new Image()
+    image.src=imageSrc;
+    const detections = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions())
+    const x = detections[0].box["_x"];
+    const y = detections[0].box["_y"];
+    const width = detections[0].box["_width"];
+    const height = detections[0].box["_height"];
+    const canvas = document.createElement("canvas")
+    const ctx = canvas.getContext('2d');
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const centerX = x + (width / 2)
+    const centerY = (y + (height / 2)) - (height * 0.2)
+    const radius = (height / 2) * 1.5
+    ctx.drawImage(image, 0, 0);
+    ctx.globalCompositeOperation = 'destination-in';
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.fill();
+    const tempCanvas = document.createElement("canvas")
+    const tCtx = tempCanvas.getContext("2d");
+    tempCanvas.width = radius*2;
+    tempCanvas.height = radius*2;
+    tCtx.drawImage(canvas, -(centerX-radius), -(centerY-radius));
+    const img = tempCanvas.toDataURL("image/png");
+    setImageSrc(img)
+  }
 
   if (currentUser.name.length !== 0) {
     return (
@@ -64,7 +106,7 @@ const Profile = () => {
             />
           </div>
           <div className="details-container">
-            <img style={{ width: '400px' }} src={imageSrc} />
+            <img style={{ width: '400px' }} src={imageSrc} id="myImage" />
           </div>
         </div>
       </>