Skip to content

F
face
Commit fe036c90 by vincent
Options

make drawLandmarks accept an array of landmarks

parent 24ec35d4
Showing with 67 additions and 54 deletions
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;
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);
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); });
var faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks];
faceLandmarksArray.forEach(function (landmarks) {
if (drawLines) {
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
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;
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;
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);
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); });
var faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks];
faceLandmarksArray.forEach(function (landmarks) {
if (drawLines) {
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
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;
landmarks.getPositions().forEach(function (pt) { return ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth); });
});
}
var NetInput = /** @class */ (function () {
......
dist/face-api.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
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
// 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
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)
return
}
const faceLandmarksArray = Array.isArray(faceLandmarks) ? faceLandmarks : [faceLandmarks]
faceLandmarksArray.forEach(landmarks => {
if (drawLines) {
ctx.strokeStyle = color
ctx.lineWidth = lineWidth
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))
// else draw points
const ptOffset = lineWidth / 2
ctx.fillStyle = color
landmarks.getPositions().forEach(pt => ctx.fillRect(pt.x - ptOffset, pt.y - ptOffset, lineWidth, lineWidth))
})
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment