SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 Canvas API Question about comparable application

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

    http://www.zennioptical.com/?gclid=C...FahDMgod_lcAbQ

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Aww dude, I forgot the URL.
    So sorry about that!
    http://www.sitepoint.com/forums/show...r-a-Photobooth

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi Aaron,

    Quote Originally Posted by aaron4osu View Post
    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?
    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/0...d-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.

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll check out those resources. Thanks again and go enjoy your vaca


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •