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:
- Loading images for HTML5 canvas is only possible with images with crossorigin attribute
- 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.
- 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
- 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
- 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!
Top comments (0)