Используя API лица js для загрузки маски на лицо, я нахожу ориентиры лица и добавляю к ним маску, но как мне загрузить добавленное изображение в целом?

Question

релевантный HTML

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile()" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output"/></p>

<div class="grid-item"></
     <script src="face-api.min.js"></script>
     <script src="./file.js"></script>
</div>

JS (файл. js)

Здесь я загружаю изображение, модели и создаю холст

  var image = document.getElementById('output');
  image.src = URL.createObjectURL(event.target.files[0]);
  await faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
  const canvas = faceapi.createCanvasFromMedia(image);

Вот как я накладываю маску на лицо.

  const item = document.querySelector(".grid-item")

  const overlay = document.createElement("img")
  overlay.src = "./mask.png"
  overlay.alt = "mask overlay."
  overlay.id = "mask"
  overlay.style.cssText = `
    position: absolute;
    left: ${newOffsetLeft}px;
    top: ${newOffsetTop+50}px;
    width: ${eyedist/mask_by_eye}px;
    transform: rotate(${angleEyes}deg);
    z-index:1;
  `

  item.appendChild(overlay);

Как мне загрузить добавленное изображение?

Answer 1

Вы не можете объединить их, если оверлей является тегом img. Однако, если вы можете загрузить его на тот же холст, на котором рисуется лицо, вы сможете получить данные комбинированного изображения.