Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help to create a photobooth

    Hi I have a question about Javascript. I want to make my own photobooth, I have found this article how to make one:
    http://arstechnica.com/business/2012...ew-webcam-api/

    I want to add some to it, I want to put a image file (glasses, hat, mustache) over the webcam canvas and take a picture. The result I want is a snapshot with the image file in it.

    I did found some code that would be helpful but it didn't work out for me.

    var ctx = bril.getContext("2d");
    var img=new Image();
    img.onload=function()
    {
    ctx.drawImage(img,0,0); // img of canvas
    };
    img.src='IMAGE.png';

    Is this possible? Thank you!

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Why don't you add in the code that you're trying to make work with this canvas...

    the way i've been learning HTML5 and how to call the image onto the canvas would follow:
    Code:
    var img;
    function eventWindowLoaded(){
    img = new Image();
    img.src = "IMAGE.png";
    img.onload = eventLoaded;
    }
    and then for the canvas:

    Code:
    <script type="text/javascript">
    var bril = document.getElementById("canvas");
    var ctx = bril.getContext("2d");
    </script>
    <body>
    <div style="position: absolute; top:50px; left:50px;">
    <canvas id="canvas" width="320" height="250" >Does not Support Canvas</canvas>
    </div>
    </body>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    of course there is a little more to the coding but i'm just putting this in terms of the format...
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brandnew View Post
    Why don't you add in the code that you're trying to make work with this canvas...

    the way i've been learning HTML5 and how to call the image onto the canvas would follow:
    Code:
    var img;
    function eventWindowLoaded(){
    img = new Image();
    img.src = "IMAGE.png";
    img.onload = eventLoaded;
    }
    and then for the canvas:

    Code:
    <script type="text/javascript">
    var bril = document.getElementById("canvas");
    var ctx = bril.getContext("2d");
    </script>
    <body>
    <div style="position: absolute; top:50px; left:50px;">
    <canvas id="canvas" width="320" height="250" >Does not Support Canvas</canvas>
    </div>
    </body>
    Thank you I have given a try but I didn't managed to pull it off. I have added a image how the photo should looks like if it's finished and the code what I now have at the moment. I can take a picture with the webcam and I can drag a png image over the canvas but when I take a picture the png image isn't on the photo. Is there a way to fix this. Many thanks.

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    </head>
    <body>

    <video id="live" autoplay></video>
    <div id="draggable" class="ui-widget-content">
    <p><img src="images/h.png" width="347" height="347" id="draggable"></p>
    </div>

    <canvas id="foto" style="display:none"></canvas>
    <p><a href="#" onClick="takepicture()">Take picture</a></p>

    <div id="filmroll"></div>

    <script type="text/javascript">
    video = document.getElementById("live")
    navigator.webkitGetUserMedia(
    {video: true, audio: true},
    function(stream) {
    video.src = window.webkitURL.createObjectURL(stream)
    },
    function(err) {
    console.log("Unable to get video stream!")
    }
    )

    function takepicture() {
    live = document.getElementById("live")
    photo = document.getElementById("photo")
    filmroll = document.getElementById("filmroll")

    photo.width = live.clientWidth
    photo.height = live.clientHeight

    var photo = document.getElementById("canvas");
    var ctx = foto.getContext("2d");

    var img;
    function eventWindowLoaded(){
    img = new Image();
    img.src = "images/h.png";
    img.onload = function(){
    ctx.drawImage(img,0,0);
    }
    }

    img = document.createElement("img")
    img.src = foto.toDataURL("image/png")
    img.style.padding = 5
    img.width = foto.width / 2
    img.height = foto.height / 2

    filmroll.appendChild(img)
    }

    $(function() {
    $( "#draggable" ).draggable();
    });
    </script>

    <div style="position: absolute; top:50px; left:50px;">
    <canvas id="canvas" width="320" height="250" >Does not Support Canvas</canvas>
    </div>

    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Need help to create a photobooth-example.jpg  
    Last edited by fh204; 12-07-2012 at 10:32 AM.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brandnew View Post
    Why don't you add in the code that you're trying to make work with this canvas...

    the way i've been learning HTML5 and how to call the image onto the canvas would follow:
    Code:
    var img;
    function eventWindowLoaded(){
    img = new Image();
    img.src = "IMAGE.png";
    img.onload = eventLoaded;
    }
    and then for the canvas:

    Code:
    <script type="text/javascript">
    var bril = document.getElementById("canvas");
    var ctx = bril.getContext("2d");
    </script>
    <body>
    <div style="position: absolute; top:50px; left:50px;">
    <canvas id="canvas" width="320" height="250" >Does not Support Canvas</canvas>
    </div>
    </body>
    I have given multiple tries but I didn't managed to get it done. I have added a example picture how it should looks like if it's finished, and I added the code I have at the moment.
    About the code, I can take pictures with the webcam and I can drag a png image over the canvas using the javascript draggable feature. But when I take a picture the png image isn't on the picture. Is it possible to fix this. Many thanks.

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    </head>
    <body>

    <video id="live" autoplay></video>
    <div id="draggable" class="ui-widget-content">
    <p><img src="image.png" width="347" height="347" id="draggable"></p>
    </div>

    <canvas id="photo" style="display:none"></canvas>
    <p><a href="#" onClick="takephoto()">take picture</a></p>

    <div id="filmroll"></div>

    <script type="text/javascript">
    video = document.getElementById("live")
    navigator.webkitGetUserMedia(
    {video: true, audio: true},
    function(stream) {
    video.src = window.webkitURL.createObjectURL(stream)
    },
    function(err) {
    console.log("Unable to get video stream!")
    }
    )

    function takephoto() {
    live = document.getElementById("live")
    photo = document.getElementById("photo")
    filmroll = document.getElementById("filmroll")

    photo.width = live.clientWidth
    photo.height = live.clientHeight

    var photo = document.getElementById("canvas");
    var ctx = photo.getContext("2d");

    var img;
    function eventWindowLoaded(){
    img = new Image();
    img.src = "image.png";
    img.onload = function(){
    ctx.drawImage(img,0,0);
    }
    }

    img = document.createElement("img")
    img.src = photo.toDataURL("image/png")
    img.style.padding = 5
    img.width = photo.width / 2
    img.height = photo.height / 2

    filmroll.appendChild(img)
    }
    //http://docs.jquery.com/UI/Draggable
    $(function() {
    $( "#draggable" ).draggable();
    });
    </script>

    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Need help to create a photobooth-example.jpg  
    Last edited by fh204; 12-07-2012 at 03:13 PM.


  •  

    Posting Permissions

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