Need help to create a photobooth

fh204 · 11-12-2012, 10:17 AM

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!

Brandnew · 11-12-2012, 10:50 PM

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>

Brandnew · 11-12-2012, 10:51 PM

of course there is a little more to the coding but i'm just putting this in terms of the format...

fh204 · 12-06-2012, 02:13 PM

Quote:

Originally Posted by Brandnew

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>

fh204 · 12-06-2012, 02:51 PM

Quote:

Originally Posted by Brandnew

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>