HTML5 Canvas API Question about comparable application

I was asked to build something similar to the app on these pages:

http://www.etryon.net/eTryon/tryon.pge

It lets the user upload a picture of themselves and then you can choose different eyeglass frames to see how they would look on you. I’m guessing the HTML5 canvas api would be a good place to start on this. The initial version of this doesn’t have to be as intricate as this one. Maybe to start I could have the user upload a picture, then choose eyeglass frame which can be dragged and dropped onto the face. I’ve looked for some demos and tutorials but can’t find anything similar. Any ideas on where to get started. Not sure what terms to even search for on this.

I realize this is pretty vague but I’m just looking to find a foothold on this project to get started.

Hi there,

I’m in a rush, but I just saw your question, so sorry for the short reply.
As you say, you’ll need to look into the canvas API.
I helped someone in the JS forum construct something (vaguely) similar last year.
If you look at my answer it might at least point you in the right direction.

Hope that helps a little.

Thanks Pullo. I tried to search through your javascript posts but could not find the one you were referring to. Then again you have been pretty active as it returned hundreds of threads. Can you post a url?

Thanks again

Aww dude, I forgot the URL.
So sorry about that!

That’s perfect. I didn’t even think about the photobooth type apps as a starting point.

After just a few minutes I created a couple of versions with the mustache switched out for some glasses.

Here is a version with the beautiful bar refaeli
http://aaronhaas.com/eyewear/bar.html

and a version that uses the user’s camera:
http://aaronhaas.com/eyewear/index.html

both work fine in chrome but not firefox or safari. Neither the draggable aspect or the photo capture work. Is it just not supported in these browsers? How much work needs to be done to get them working in the current generation of browsers for firefox and safari.

Thanks again,
-aaron

Hi Aaron,

The draggable aspect should work.
It is implemented using jQuery UI draggable and that works in all major browsers.
I just tried your first demo (with Bar Refaeli) and that worked just fine in FF 19.0.1

As for the webcam API, that is still quite experimental.
Here’s an overview of what’s currently possible: http://caniuse.com/stream
Maybe you also want to check out: http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas
Or: http://wolframhempel.github.com/photobooth-js/

If I was you, I would allow users with browsers which support this feature to make us of it and have a photo upload as a fall back.

I’m afraid I won’t be able to participate much more in this discussion, as I am off on vacation for two and a half weeks tomorrow morning.

I’ll check out those resources. Thanks again and go enjoy your vaca