...

View Full Version : Need help to create a photobooth



fh204
11-12-2012, 11: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/01/hands-on-building-an-html5-photo-booth-with-chromes-new-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, 11: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:


var img;
function eventWindowLoaded(){
img = new Image();
img.src = "IMAGE.png";
img.onload = eventLoaded;
}

and then for the canvas:



<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, 11: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, 03:13 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:


var img;
function eventWindowLoaded(){
img = new Image();
img.src = "IMAGE.png";
img.onload = eventLoaded;
}

and then for the canvas:



<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, 03:51 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:


var img;
function eventWindowLoaded(){
img = new Image();
img.src = "IMAGE.png";
img.onload = eventLoaded;
}

and then for the canvas:



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum