DEV Community

loading...
Cover image for For fun and learning: playing around with JavaScript face detection and html5 canvas
Blue Tomato Dev

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

Markus Tiefenbacher
・2 min read

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:

Alt Text

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:

Alt Text

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!

Discussion (0)