Forums Tout JavaScript

Bonjour !
J'aimerais faire un site internet où, en envoyant une image de sa tête, elle soit collée sur un arrière plan choisi au préalable par le codeur. Je me suis servi de toute la documentation accessibles pour faire ce code qui permet de détecter un visage et de le coller sur une image de fond mais il ne fonctionne pas. Est- ce que quelqu'un pourrait m'aider à le corriger et le rendre fonctionnel ??

Merci beaucoup !!!

Code : Tout sélectionner

<script>
  const { faceapi } = require('face-api.js');

  async function handleImageUpload() {
      const inputImage = document.getElementById('inputImage');
      const outputCanvas = document.getElementById('outputCanvas');
      const ctx = outputCanvas.getContext('2d');
      errorMessage.textContent = '';

      const backgroundImage = new Image();
      backgroundImage.src = 'image-de-fond.jpg';
      await backgroundImage.decode();

      ctx.drawImage(backgroundImage, 0, 0, outputCanvas.width, outputCanvas.height);

      const userImage = new Image();
      userImage.src = URL.createObjectURL(inputImage.files[0]);
      await userImage.decode(); // Attendez que l'image soit chargée

      const detections = await faceapi.detectAllFaces(userImage).withFaceLandmarks().withFaceDescriptors();

      if (detections.length > 0) {
        const face = detections[0].detection.box;
        ctx.drawImage(userImage, face.x, face.y, face.width, face.height);
      } else {
        errorMessage.textContent = 'Veuillez sélectionner une image avec un visage clairement visible.';
      }
    }

    const inputImage = document.getElementById('inputImage');
    inputImage.addEventListener('change', handleImageUpload);
</script>

J'ai essayé d'installer ce package qui a l'air marrant

Mais il n'est pas assez maintenu, et des vulnérabilités graves sont présentes et non réparable avec un audit fix :

Code : Tout sélectionner

# npm audit report

node-fetch  <=2.6.6
Severity: high
The `size` option isn't honored after following a redirect in node-fetch - https://github.com/advisories/GHSA-w7rc-rwvf-8q5r
node-fetch forwards secure headers to untrusted sites - https://github.com/advisories/GHSA-r683-j2x4-v87g
fix available via `npm audit fix`
node_modules/node-fetch
  @tensorflow/tfjs-core  1.1.0 - 2.4.0
  Depends on vulnerable versions of node-fetch
  node_modules/tfjs-image-recognition-base/node_modules/@tensorflow/tfjs-core
    tfjs-image-recognition-base  >=0.6.1
    Depends on vulnerable versions of @tensorflow/tfjs-core
    node_modules/tfjs-image-recognition-base

3 high severity vulnerabilities

Je préfère ne pas prendre de risque

It seems that you're trying to use the face-api.js library to detect faces in an image and then paste them onto a background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Detection</title>
</head>
<body>
<input type="file" id="inputImage">
<canvas id="outputCanvas"></canvas>
<div id="errorMessage"></div>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/face-api.js"></script>
<script>
async function handleImageUpload() {
const inputImage = document.getElementById('inputImage');
const outputCanvas = document.getElementById('outputCanvas');
const errorMessage = document.getElementById('errorMessage');
const ctx = outputCanvas.getContext('2d');
errorMessage.textContent = '';

const backgroundImage = new Image();
backgroundImage.src = 'image-de-fond.jpg';
await backgroundImage.decode();

ctx.drawImage(backgroundImage, 0, 0, outputCanvas.width, outputCanvas.height);

const userImage = new Image();
userImage.src = URL.createObjectURL(inputImage.files[0]);
await userImage.decode(); // Wait for the image to load

const detections = await faceapi.detectAllFaces(userImage).withFaceLandmarks().withFaceDescriptors();

if (detections.length > 0) {
const face = detections[0].detection.box;
ctx.drawImage(userImage, face.x, face.y, face.width, face.height);
} else {
errorMessage.textContent = 'Please select an image with a clearly visible face.';
}
}

const inputImage = document.getElementById('inputImage');
inputImage.addEventListener('change', handleImageUpload);
</script>
</body>
</html>

Using the library to find faces in photos and then cutting and pasting them onto a different background seems to be your goal.
run 3

Your objective seems to involve using a library to detect faces in photos and then transferring them onto a new background cookie clicker 2 unblocked

C'est génial que tu te lances dans la création d'un site Internet aussi cool ! Le concept de pouvoir coller sa tête sur un arrière-plan personnalisé, c'est à la fois amusant et créatif. C'est dommage que tu rencontres des problèmes avec ton code. Pourtant, il existe effectivement des cours en ligne et des tutoriels ici qui peuvent t'aider à maîtriser les langages de programmation nécessaires pour créer ton site. Tu pourrais commencer par explorer des ressources sur le traitement d'image, la détection faciale et le développement web.

Une fois que vous aurez fourni le code, je l'examinerai attentivement et je vous aiderai à le déboguer et à le rendre fonctionnel. N'hésitez pas à inclure également toutes les informations pertinentes, telles que les bibliothèques ou les frameworks que vous avez utilisés,geometry dash les erreurs que vous avez rencontrées, etc.

Forums Tout JavaScript

comment marche face-api.js

comment marche face-api.js

Re: comment marche face-api.js

Re: comment marche face-api.js

Re: comment marche face-api.js

Re: comment marche face-api.js

Re: comment marche face-api.js

Re: comment marche face-api.js