Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Detection API Demo</title>
</head>
<body>
<img hidden id="image" src="faces.png">
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
let image = document.getElementById('image');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
ctx.lineWidth = 2;
let faceDetector = new FaceDetector();
faceDetector.detect(image)
.then((faces) => draw(faces))
.catch((error) => {
console.error('Error:', error);
});
function draw(faces) {
faces.forEach((face) => {
face.landmarks.forEach((landmark) => {
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.rect(landmark.location.x-20, landmark.location.y-10, 50, 20);
ctx.stroke();
});
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.rect(face.boundingBox.x, face.boundingBox.y, face.boundingBox.width, face.boundingBox.height);
ctx.stroke();
});
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment