For fun and learning: playing around with JavaScript face detection and html5 canvas

It’s easter and wanted to make some fun for my coworkers and what should be better than some Covid-19 fun in this surreal times.

I had the idea to put every model in our webshop a surgical mask on their face.

But how should I solve this?

Face Detection!
This was a topic I ever wanted to discover and so it was a perfect match for this. I started reading the face-api.js documentation and after some hours of playing around with it I was ready to ship the easter egg on our testing server.

Result:

Try it yourself:

I made also a version where you can try it yourself: https://tiefenb.github.io/use-a-mask/

... and here are the source code: https://github.com/tiefenb/use-a-mask

Reactions so far:

Learnings:

1. Loading images for HTML5 canvas is only possible with images with crossorigin attribute
2. crossorigin attribute has to be set on the image tag before the image is loaded - it’s not possible afterwards. That means also, if you create the image element with JavaScript you have to add the crossorigin-attribute before the src-attribute.
3. Rotating an single image in html5 canvas is not possible in the way most of us think. you have to rotate the canvas-context, than you put on the canvas the image and you rotate the canvas-context back to your normal angle
4. Putting an image on a canvas is only possible after the image is full loaded - so you have to listen in the image.onload event
5. face-api.js tensorflow.js-models are quite big - better to make detection it on the server not the client

Thank's for reading and happy easter!