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>