도와주세요ㅠ face-api.js로 얼굴 감지한 부분에 얼굴만 크롭하고 싶은데 모르겠어요

캡처
캡처1.PNG

얼굴 인식하는거까진 따라했는데 저 파란색박스에 얼굴검출한 부분만 이미지 크롭을 하고싶은데
Node.js에서 이미지 쉽게 처리하는 라이브러리중에 sharp.js 써라고 하더라구요… 근데 제가 자바스크립트 언어를 다뤄본적이 없어서 그런데 좀 알려주실분 계실까요…?

크롭하는 예제가 API 문서에 있네요. (face-api.js) 따라서 drawBox.draw(canvas) 아래에 이런 코드를 추가하면 되지 않을까 싶습니다.

const regionsToExtract = [new faceapi.Rect(box.x, box.y, box.width, box.height)]
const canvases = await faceapi.extractFaces(image, regionsToExtract)
canvases.forEach((canvas) => {
  const img = document.createElement('img')
  img.src = canvas.toDataURL()
  document.append(img)
})