make drawLandmarks accept an array of landmarks

build/utils.d.ts

@@ -21,6 +21,6 @@ export declare function drawText(ctx: CanvasRenderingContext2D, x: number, y: nu
 export declare function drawDetection(canvasArg: string | HTMLCanvasElement, detection: FaceDetection | FaceDetection[], options?: DrawBoxOptions & DrawTextOptions & {
     withScore: boolean;
 }): void;
-export declare function drawLandmarks(canvasArg: string | HTMLCanvasElement, faceLandmarks: FaceLandmarks, options?: DrawLandmarksOptions & {
+export declare function drawLandmarks(canvasArg: string | HTMLCanvasElement, faceLandmarks: FaceLandmarks | FaceLandmarks[], options?: DrawLandmarksOptions & {
     drawLines: boolean;
 }): void;

build/utils.js

@@ -161,22 +161,25 @@ function drawLandmarks(canvasArg, faceLandmarks, options) {
     var drawLines = Object.assign({ drawLines: false }, (options || {})).drawLines;
     var ctx = getContext2dOrThrow(canvas);
     var lineWidth = drawOptions.lineWidth, color = drawOptions.color;
+    var faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks];
+    faceLandmarksArray.forEach(function (landmarks) {
         if (drawLines) {
             ctx.strokeStyle = color;
             ctx.lineWidth = lineWidth;
-        drawContour(ctx, faceLandmarks.getJawOutline());
-        drawContour(ctx, faceLandmarks.getLeftEyeBrow());
-        drawContour(ctx, faceLandmarks.getRightEyeBrow());
-        drawContour(ctx, faceLandmarks.getNose());
-        drawContour(ctx, faceLandmarks.getLeftEye(), true);
-        drawContour(ctx, faceLandmarks.getRightEye(), true);
-        drawContour(ctx, faceLandmarks.getMouth(), true);
+            drawContour(ctx, landmarks.getJawOutline());
+            drawContour(ctx, landmarks.getLeftEyeBrow());
+            drawContour(ctx, landmarks.getRightEyeBrow());
+            drawContour(ctx, landmarks.getNose());
+            drawContour(ctx, landmarks.getLeftEye(), true);
+            drawContour(ctx, landmarks.getRightEye(), true);
+            drawContour(ctx, landmarks.getMouth(), true);
             return;
         }
         // else draw points
         var ptOffset = lineWidth / 2;
         ctx.fillStyle = color;
-    faceLandmarks.getPositions().forEach(function (pt) { return ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth); });
+        landmarks.getPositions().forEach(function (pt) { return ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth); });
+    });
 }
 exports.drawLandmarks = drawLandmarks;
 //# sourceMappingURL=utils.js.map
\ No newline at end of file

dist/face-api.js

@@ -15098,22 +15098,25 @@
         var drawLines = Object.assign({ drawLines: false }, (options || {})).drawLines;
         var ctx = getContext2dOrThrow(canvas);
         var lineWidth = drawOptions.lineWidth, color = drawOptions.color;
+        var faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks];
+        faceLandmarksArray.forEach(function (landmarks) {
             if (drawLines) {
                 ctx.strokeStyle = color;
                 ctx.lineWidth = lineWidth;
-            drawContour(ctx, faceLandmarks.getJawOutline());
-            drawContour(ctx, faceLandmarks.getLeftEyeBrow());
-            drawContour(ctx, faceLandmarks.getRightEyeBrow());
-            drawContour(ctx, faceLandmarks.getNose());
-            drawContour(ctx, faceLandmarks.getLeftEye(), true);
-            drawContour(ctx, faceLandmarks.getRightEye(), true);
-            drawContour(ctx, faceLandmarks.getMouth(), true);
+                drawContour(ctx, landmarks.getJawOutline());
+                drawContour(ctx, landmarks.getLeftEyeBrow());
+                drawContour(ctx, landmarks.getRightEyeBrow());
+                drawContour(ctx, landmarks.getNose());
+                drawContour(ctx, landmarks.getLeftEye(), true);
+                drawContour(ctx, landmarks.getRightEye(), true);
+                drawContour(ctx, landmarks.getMouth(), true);
                 return;
             }
             // else draw points
             var ptOffset = lineWidth / 2;
             ctx.fillStyle = color;
-        faceLandmarks.getPositions().forEach(function (pt) { return ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth); });
+            landmarks.getPositions().forEach(function (pt) { return ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth); });
+        });
     }
 
     var NetInput = /** @class */ (function () {

examples/views/detectAndDrawLandmarks.html

@@ -90,17 +90,18 @@
       const locations = await faceapi.locateFaces(input, minConfidence)
 
       const faceTensors = (await faceapi.extractFaceTensors(input, locations))
-      landmarksByFace = await Promise.all(faceTensors.map(t => faceapi.detectLandmarks(t)))
+      let landmarksByFace = await Promise.all(faceTensors.map(t => faceapi.detectLandmarks(t)))
 
       // free memory for face image tensors after we computed their descriptors
       faceTensors.forEach(t => t.dispose())
 
-      landmarksByFace.forEach((landmarks, i) => {
       // shift and scale the face landmarks to the face image position in the canvas
+      landmarksByFace = landmarksByFace.map((landmarks, i) => {
         const box = locations[i].forSize(width, height).getBox()
-        faceapi.drawLandmarks(canvas, landmarks.forSize(box.width, box.height).shift(box.x, box.y), { lineWidth: drawLines ? 2 : 4, drawLines, color: 'red' })
+        return landmarks.forSize(box.width, box.height).shift(box.x, box.y)
       })
 
+      faceapi.drawLandmarks(canvas, landmarksByFace, { lineWidth: drawLines ? 2 : 4, drawLines, color: 'red' })
       faceapi.drawDetection('overlay', locations.map(det => det.forSize(width, height)))
     }
 

src/utils.ts

@@ -211,7 +211,7 @@ function drawContour(
 
 export function drawLandmarks(
   canvasArg: string | HTMLCanvasElement,
-  faceLandmarks: FaceLandmarks,
+  faceLandmarks: FaceLandmarks | FaceLandmarks[],
   options?: DrawLandmarksOptions & { drawLines: boolean }
 ) {
   const canvas = getElement(canvasArg)
@@ -229,21 +229,25 @@ export function drawLandmarks(
   const ctx = getContext2dOrThrow(canvas)
   const { lineWidth, color } = drawOptions
 
+  const faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks]
+
+  faceLandmarksArray.forEach(landmarks => {
     if (drawLines) {
       ctx.strokeStyle = color
       ctx.lineWidth = lineWidth
-    drawContour(ctx, faceLandmarks.getJawOutline())
-    drawContour(ctx, faceLandmarks.getLeftEyeBrow())
-    drawContour(ctx, faceLandmarks.getRightEyeBrow())
-    drawContour(ctx, faceLandmarks.getNose())
-    drawContour(ctx, faceLandmarks.getLeftEye(), true)
-    drawContour(ctx, faceLandmarks.getRightEye(), true)
-    drawContour(ctx, faceLandmarks.getMouth(), true)
+      drawContour(ctx, landmarks.getJawOutline())
+      drawContour(ctx, landmarks.getLeftEyeBrow())
+      drawContour(ctx, landmarks.getRightEyeBrow())
+      drawContour(ctx, landmarks.getNose())
+      drawContour(ctx, landmarks.getLeftEye(), true)
+      drawContour(ctx, landmarks.getRightEye(), true)
+      drawContour(ctx, landmarks.getMouth(), true)
       return
     }
 
     // else draw points
     const ptOffset = lineWidth / 2
     ctx.fillStyle = color
-  faceLandmarks.getPositions().forEach(pt => ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth))
+    landmarks.getPositions().forEach(pt => ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth))
+  })
 }
\ No newline at end of file