I m trying to take image from screen of live video by using canvas method. But when i press capture and press View URI button i get only blank image. I also saw this post: Javascript Canvas Blank Image but made no help.
Here is my code:
<html>
<body>
<iframe id="video" width="20%" height="419" src="http://videoplayer.vodobox.com/vodobox_player.php?vid=http://109.123.70.72:1935/live/ptvsports/samitv.m3u8&img=&play=?" frameborder="0" allowfullscreen></iframe>
<br/>
<button onClick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>
<div id="container" style="border:none">
<canvas id="imageView" style="display:none; left: 0; top: 0; z-index: 0;border:none" width="300" height="200">
</canvas>
</div>
<div id="imgs" style="border:solid">
</div>
<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 imgs = document.getElementById("imgs");
imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, 'png'));
}
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();
getURIformcanvas();
}
</script>
</body>
</html>
output:
Related
I can't find out the problem. I can't print the word "hello" in the canvas but it seems my codes are logical. I have tried figuring the problem out for 30 minutes.
var words = ["buddha", "canoe", "dice", "elephant"];
var canvas;
var ctx;
//var timer;
var getrandomphoto = -1;
function play() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText = ("hello", 100, 100);
// getrandomphoto= getrandomnumber();
// document.getElementById("hk").src= words[getrandomphoto]+".jpg" ;
}
function getrandomnumber() {
var random_num = Math.random() * words.length;
var random_int = Math.floor(random_num);
return random_int;
}
canvas {
border: 1px solid black;
}
#message {
color: red;
}
<img id="hk" src=".jpg" alt="no photo" width="200" /></img>
<br/>
<br/>
<canvas id="myCanvas" height="200" width="500"></canvas>
<br/>
<button onclick="play()">Play</button>
<button onclick="moveleft()">←</button>
<button onclick="moveright()">→</button>
<p id="message">Press Play</p>
<p>Plate X-coordinate: <span id="plateX"></span>
<p>Word X-coordinate: <span id="wordX"></span>
<p>Distance: <span id="dist"></span>
Your issue is that ctx.fillText is a function but you're not calling it with any arguments. Thus you need to call it with arguments instead of setting it equal to ("hello", 100, 100):
ctx.fillText("hello", 100, 100);
See working example below:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
#message {
color: red;
}
</style>
<script>
var words = ["buddha", "canoe", "dice", "elephant"];
var canvas;
var ctx;
//var timer;
var getrandomphoto = -1;
function play() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("hello", 100, 100); // change ctx.fillText = ("hello", 100, 100) to ctx.fillText("hello", 100, 100)
getrandomphoto= getrandomnumber();
document.getElementById("hk").src= words[getrandomphoto]+".jpg" ;
}
function getrandomnumber() {
var random_num = Math.random() * words.length;
var random_int = Math.floor(random_num);
return random_int;
}
</script>
</head>
<body>
<img id="hk" src=".jpg" alt="no photo" width="200" /></img>
<br/>
<br/>
<canvas id="myCanvas" height="200" width="500"></canvas>
<br/>
<button onclick="play()">Play</button>
<button onclick="moveleft()">←</button>
<button onclick="moveright()">→</button>
<p id="message">Press Play</p>
<p>Plate X-coordinate: <span id="plateX"></span>
<p>Word X-coordinate: <span id="wordX"></span>
<p>Distance: <span id="dist"></span>
</body>
</html>
I am stuck with a code and my job is to keep on adding canvas when button is clicked. this canvas should also hold a circle. Whenever a button is clicked it should result in displaying a new canvas with a circle inside beside older ones(canvas that are created earlier). Please Help.
This is my code
The two canvases created are default on page and new ones should be created upon clicking the button
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillText("Alex", 10, 50);
var d = document.getElementById("myCanvas1");
var ctx1 = d.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.fillText("Clay", 10, 50);
</script>
<script>
function fun(){
var e = document.getElementById("myCanvas2");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
}
</script>
<br><br>
<button type="button" onclick="fun()">+</button>
</body>
</html>
Alright, so what I did was I took part of your code(for the circle), and did what you asked!
in this JsFiddle (https://jsfiddle.net/jrhvcrtm/), When you click the button, you get a new div, with the same properties as the other one, with a circle inside.
Just use this in your own code, and if you didn't realize yet, it uses jQuery in it.
Here is a snippet:
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
$('#button').click(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);//This line is added just for styling
});
$('#button').click(function() {
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
});
#test {
height:100px;
width:200px;
border: 3px solid black;
margin-left: 50px;
margin-top: 50px;
}
#button {
height:50px;
width:50px;
border: 3px solid black;
margin-left: 200px;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="button">
Click
</button>
<canvas id="test" class="test"></canvas>
Instead of var e = document.getElementById("myCanvas2"), create a new canvas, then append it to your body.
var e = document.createElement('canvas') // create new canvas
document.body.appendChild(e) // make it accessible on the DOM
var ctx2 = e.getContext("2d")
// remain the same code ...
You may also put all canvas in a <div id="canvases"></div> for a better management. Then the onclick listener will be as following code.
var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)
var ctx2 = e.getContext("2d")
// remain the same code ...
I have a rectangle and a button. When the user clicks the button, I want the rectangle to get bigger. This is my code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
var height = 150;
function myFunction(){
height = 300;
}
<button onclick="myFunction()">Click Me!</button>
<canvas id="myCanvas" width="300" height="height" style="border:1px solid #d3d3d3;"></canvas>
Although, nothing happens when I click the button. Help?
height="height" is not a valid value in html.
On click of button you can change the style.height of the canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
var height = 150;
function myFunction(){
c.style.height = '300px'; // changed here
}
DEMO
Edit
Remove the width from the html, add it through css
JS
function myFunction(){
c.style.height ='300px';
}
CSS
#myCanvas{
width:300px
}
HTML
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>
DEMO 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
function myFunction(){
c.style.height ='300px';
}
#myCanvas{
width:300px
}
<button onclick="myFunction()">Click Me!</button>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>
I have a source code. I use tag canvas in code HTML. I have one tag div before 11 tag Canvas and two tag div behind tag canvas. When I run the code the error occurred.
If I set property of height for canvas < 50px then arrow hidden.
And if I don't set property of heigth of canvas. When I run the code, the display: tag div MISSSSS and MOMMMMM between tag canvas. Sorry I don't post image display because I do not has the right.
I want to MISSSSSS and MOMMMMMM behind canvas.
And I want set property of height for canvas = 30px don't hidden arrow.
Live example on the JSFiddle
HTML:
<div>LOLLL</div>
<div style="height:30px;">
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_1" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
</div>
<div>MISSSSSS</div>
<div>MOMMMM</div>
Javascript:
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
var t = setTimeout("resize()", 200);
else
resize();
function resize() {
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var targetWidth = 800;
var targetHeight = 600;
window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
}
function canvas_arrow(context, fromx, fromy, tox, toy){
var headlen = 20; // length of head in pixels
var dx = tox-fromx;
var dy = toy-fromy;
var angle = Math.atan2(dy,dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineWidth=2;
//context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
}
$('document').ready(function(){
var count= parseInt($("canvas").length);
for(var i=0; i< count; i++){
var ctx= $("canvas")[i].getContext('2d');
var temp= $("canvas")[i].id;
if(temp.indexOf("text") != -1){
ctx.font="15px Times New Roman";
ctx.fillText("I Love My Mom",10,10);
}
else{
if(temp.indexOf("arrow") != -1){
ctx.beginPath();
canvas_arrow(ctx,10,10,100,10);
ctx.stroke();
}
}
}
});
I'm confused about what your goal is, but try overflow:hidden; in addition to height: 30px;
https://jsfiddle.net/9j7vx5dz/2/
I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)