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>