The problem I am having is the following:
I use a video and a canvas tag and capture a frame from the video tag and place it into the canvas tag, but when I create a reference of the canvas in javascript so that I may return the dataURL it bombs out. Please note the video is local, is this setting the canvas origin-clean flag to false even though it is local? I have tested in Firfox 3.6, IE9 Beta, Safari 5.0.3 and it fails on each of them.
Here is the code I use to place the frame from the video:
var video = document.getElementById(“video”);
var canvasDraw = document.getElementById(‘imageView’);
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext(’2d’);
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);
The above works perfectly.
Below is the code to get the dataURL:
function getURIformcanvas() {
var ImageURItoShow = “”;
var canvasFromVideo = document.getElementById(“imageView”);
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext(“2d”); // Get the context for the canvas.
var ImageURItoShow = canvasFromVideo.toDataURL(“image/png”); //<– It fails on this line.
}
var doc = document.getElementById("txtUriShow");
doc.value = ImageURItoShow;
}
It always fails on the line:
var ImageURItoShow = canvasFromVideo.toDataURL("image/png");
Any thought on what might be the problem. If I load a normal image into the canvas it works fine, but as soon as I load the image from video into the canvas that line fails.
Any ideas?
Here is the complete page code, to reproduce the error follow the following steps:
Click the "Capture" button. (an image will be captured from the video, very important to do this first!!)
Click the "View URI" button. (this is supposed to create the toDataURL of the video image in the canvas and place it in the textbox, but it does not work)
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Video.aspx.vb" Inherits="Video" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta content="" charset="utf-8" />
<title>Video to Canvas</title>
</head>
<body>
<script type="text/javascript">
</script>
<table>
<tr>
<td>
<p style="height:21px"></p>
<video id="video" width="400px" height="300px" controls="true">
<source src="gizmo.mp4">
<source src="gizmo.ogv">
<source src="gizmo.webm">
</video><br/>
<button onclick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>
</td>
<td style="vertical-align:top">
<button onclick="getURIformcanvas()" style="width: 64px;border: solid
2px #ccc;">View URI</button></p>
<div id="container" style="border:none">
<canvas id="imageView" style="position: absolute; left: 0; top: 0;
z-index: 0;border:none" width="400" height="300">
<p>Unfortunately, your browser is currently unsupported by our web
application. We are sorry for the inconvenience. Please use one of
the
supported browsers listed below, or draw the image you want using an
offline tool.</p>
<p>Supported browsers: Opera, Firefox, Safari, and Konqueror.</p>
</canvas>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" id="txtUriShow" name="txtUriShow" value="" />
<img type="text" id="img1" name="img1" value="" />
</td>
</tr>
</table>
<script>
function getURIformcanvas() {
var ImageURItoShow = "";
var canvasFromVideo = document.getElementById("imageView");
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext("2d"); // Get the context for the canvas.canvasFromVideo.
var ImageURItoShow = canvasFromVideo.toDataURL("image/png");
}
var doc = document.getElementById("txtUriShow");
doc.value = ImageURItoShow;
}
var videoId = 'video';
function capture() {
var video = document.getElementById("video");
var canvasDraw = document.getElementById('imageView');
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext('2d');
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);
ctxDraw.save();
}
</script>
</body>
</html>
These files are local in you HDD, or by local you mean that the video is in the same folder as the html/js files?
You have to put all the files somewhere in the web to test it appropriately.
Related
I'm trying to do a silly thing : a flying sausage on a HTML page.
I'm trying to do it from Paper.js
http://paperjs.org/
here is the HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SkyWurst</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js">
</script>
<!--Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="saucisse.js" canvas="myCanvas">
</script>
</head>
<body>
<canvas id="myCanvas" width="1600" height="900"
id="tools_sketch" width="1600" height="900"
style="background: url(sky.jpg) no-repeat center center;">
</canvas>
</body>
</html>
and here is the saucisse.js
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
// The amount of points in the path:
var points = 10;
// The distance between the points:
var length = 25;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 70,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth();
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
sky.jpg, paper.js, saucisse.js and saucisse.html are in the same folder
Everything is fine with Firefox but with Chrome and IE, there is only the sky, and no sausage. Very sad.
Any idea ?
I can't say definitively but I suspect that either paper.js or saucisse.js is not loading when you run it locally. It could be because the files are missing or in the wrong place.
Another possibility is that the server paper.js is paper-full.js while the local paper is paper-core.js. If that's the case both files would load but the saucisse script would fail because the paperscript features aren't loaded.
I did embed saucisse.js within the HTML file and referenced a version of paper that I know was correct and that runs locally using Chrome, IE, and Firefox. I don't know why Firefox runs correctly. Maybe Firefox had a tab that was already open to a correctly working version before you made a change that broke things? If so, it will continue to work until you reload the page.
I have got my video & its playing fine, but now i need to add a logo on my video tag at right bottom corner(the coordinates(2,2,60,60) icon size is 60*60),
I thought of using canvas, but came up some thing like this..
<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
return;
}
var context = element.getContext('2d');
if (!context || !context.drawImage) {
return;
}
var google_img = new Image();
google_img.addEventListener('load', function () {
context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";
},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4" width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video>
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>
any help to get it..
thanks in advance
shameer ali shaik
You could simply use a div as loxxy said in a comment, but if you really want to use canvas for some reason here is a jsfiddle with your code (fixed) :
http://jsfiddle.net/aS9VG/
The trick is to set the element to an absolute position so it can overlap another element :
style="position:absolute;right:150px;bottom:300px"
I am using mac and updated chrome to 18.0.1025.142.
Now I have a strange problem. In most cases (not always what is weird) method context.createPattern() doesn't work and instead of bitmap filling it's filling with black color.
Yes this is an issues: http://code.google.com/p/chromium/issues/detail?id=113592
I am still looking for a temporary solution on my projects too.
It is a common problem in google chrome and opera , In this case you should create a function that will contain all script of canvas and also create an image pattern in this function . Then you need to call the function at window.onload event or any event , then I think image creatPattern() work well . Just follow the example and try to understand ....
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img src="img_lamp.jpg" id="lamp" width="32" height="32">
<p>Canvas:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = draw;
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = document.getElementById("lamp")
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
}
</script>
</body>
</html>
use your own jpg or png here ... Enjoy !.
I am working with some image manipulations and I am trying to have a basic canvas and I have a text box now If I enter any text it should change immediately on the canvas and I need that text to move on the canvas and record it's X and Y positions.So how do I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var drawLogo = function () {
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');
context.font = 'italic 40px sans-serif';
context.textBaseline = 'top';
context.fillText('Some text', 60, 0);
};
$(function () {
var canvas = document.getElementById('my_canvas');
if (canvas.getContext) {
drawLogo();
}
});
</script>
</head>
<body>
<canvas id="my_canvas" width="900" height="300">
Fallback content here
</canvas>
<input id="Text1" type="text" />
</body>
</html>
First, everytime the text changes you'll need to re-draw the ENTIRE canvas.
Do this:
Add a myText, x & y inputs to your drawLogo function: drawLogo(myText, x, y) and change this line to context.fillText(myText, x, y);
To change text on the canvas, add a JS event handler to the textbox and call the new drawLogo function passing all 3 input parameters.
Keep in mind that you cannot modify what's drawn on a Canvas. You can only draw it once so all modifiers have to be done in one pass.
The moving part is not clear but you'll need to calculate your equations of motion in JS beforehand. When you call the new drawLogo(myText, x, y) you'll pass these values from JS.
Watch out for this line context.textBaseline = 'top'; as last time I checked it wasn't supported in Firefox.
I am working through the HTML5 canvas tutorial on the following website:
Mozilla Developers.
In this tutorial, they say that you can use a canvas element as the backdrop of another canvas element. I have tried to do exactly that with the following html page. Unfortunately, the debugger in chrome says failed to load resource. Am I referencing the source canvas object the correct way in the function draw2()?:
<html>
<head>
<title>CANVAS TESTING</title>
<script type="text/javascript">
function draw()
{
var ctx = document.getElementById('tutorial').getContext('2d');
ctx.translate(0,document.getElementById('tutorial').height);
ctx.scale(1,-1)
// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(1, '#00ABEB');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.25, 'rgba(0,0,0,0)');
lingrad2.addColorStop(0.75, '#000');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
}
function draw2()
{
ctx=document.getElementById('canvas').getContext('2d');
img = new Image();
img.onload = function()
{
ctx.drawImage(img,0,0);
}
img.src = document.getElementById('tutorial');
}
</script>
</head>
<body onload="draw()">
<p>This is a test of canvas element.</p>
<canvas id="tutorial" width="400" height="400" style="background-color: black"></canvas>
<br /><br />
<canvas id="canvas" width="400" height="400" style="background-color: black"></canvas>
<p>
<input type="button" onclick="draw2()" value="Draw!" />
</p>
</body>
Your solution is kinda correct but you're making it waaaay more complicated than it has to be.
All you have to do is this, nothing any fancier:
var tut = document.getElementById('tutorial');
ctx.drawImage(tut,0,0); // just put in the canvas you want to draw!
Here's a live jsfiddle example if you need more detail
Ok, I just found the answer to my question.
going off the function in Draw2(), I needed to set my img.src to the following:
img.src = document.getElementById('tutorial').toDataURL();
What this does is returns the base64 encoded data string of the png image of the canvas element.