-2

I'm working on a project that will use a user's webcam and always be looking for faces when detected and the face is within a certain area (to make sure that they are facing forward). And then take a picture of the face and save it to the web server.

I've found some facial detection projects that use usergermedia and use a canvas to overlay an image on top of the detected face seen here: https://github.com/neave/face-detection

The code is confusing to a newbie like me, I see that I should probably play with the face.html file and the detect objects function. But instead of having it draw the glasses how would I get it to save it as an image?

user2266621
  • 97
  • 1
  • 1
  • 7
  • Could someone explain more on this: stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server – user2266621 Apr 11 '13 at 19:26

1 Answers1

3

You could use the canvas element method toDataURL() to extract the image bitmap decoded into base64 and send it to your server. There you can decode the base64 string and save the content into a new file or you can use a graphic library (depending on your server and programming language of choice) to manipulate the bitmap before saving it into an image file.

This can help you: How to save a HTML5 Canvas as Image on a server

Community
  • 1
  • 1
iMoses
  • 4,338
  • 1
  • 24
  • 39
  • Aha, I found this related to his question: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ – Menelaos Apr 11 '13 at 19:41