Draw base64 video to canvas? - javascript

How to i can draw base64 video to the canvas ,
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var video = new Video();
video.onload = function() {
ctx.drawVideo(video, 0, 0);
//ctx.fillText("Hello World", 10,50);
};
video.src = "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21.......
aWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yNC4y";
I want to show some text over base64 video.

$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.createElement("VIDEO"); video.setAttribute("src","http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv");
video.play();
video.addEventListener('play', function() {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
ctx.fillText("Hello World", 10,50);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theater">
<canvas id="canvas"></canvas>
</div>
There is no Video() class and no drawVideo() method present. You can only do using drawImage() by getting screen every interval, then add your text.

Related

dataURL not working when the context of the canvas is an image

i was trying to download the context of the canvas as an image using dataURL() through the following code but it's not working for some reason. However, when i replace the context of the canvas to be something else besides the image it actually works, so can you tell how can i fix this
<a href="#" id="downloader" >Download!</a>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
image.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, -60);
}
image.src = 'image.png';
$('#downloader').click(function(){
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream"));
$(this).attr('download', "Picture.png");
});
</script>
Your JS should be:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
//First add src, then set the height and width
image.src = 'image.png';
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// Draw image from start and not from behind the axis
ctx.drawImage(image, 0, 0);
}
$('#downloader').click(function() {
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png"))
$(this).attr('download', "Picture.png");
});

Canvas - drawImage() after clearRect()

I have a problem. I am creating simple game in Canvas using JavaScript. Image doesn't display after call clearRect(), does anyone know, how to solve it?
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
render1();
function render1() {
var image = new Image();
image.onload = function () {
context1.drawImage(image, left1, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left1++;
requestAnimationFrame(render1);
}
var left2 = 0;
var context2 = document.getElementById('canvas2').getContext('2d');
render2();
function render2() {
context2.clearRect(0, 0, 500, 250);
var image = new Image();
image.onload = function () {
context2.drawImage(image, left2, 0, 200, 200);
};
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
left2++;
requestAnimationFrame(render2);
}
canvas {
display: block;
}
It works, but old images are not deleted:
<canvas id="canvas1" height="250" width="500"></canvas>
It doesn't work, because of clearRect():
<canvas id="canvas2" height="250" width="500"></canvas>
if you try to animate your image , its not necessary to make two canvas instead use a timer , i hope this will help
`
var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
var canvas1 = document.getElementById('canvas1');
window.onload = init;
function init() {
setInterval(drawc, 1000 / 60);
};
function drawc() {
if (left1 > canvas1.width) {
left1 = 0;
}
render1();
}
function render1() {
with(context1) {
clearRect(0, 0, canvas1.width, canvas1.height);
var image = new Image();
image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
beginPath();
drawImage(image, left1, 0, 200, 200);
closePath();
fill();
left1++;
// requestAnimationFrame(render1);
}
};

Auto refresh html canvas image not working

For my website, I need to redraw an image from server which is continuously updating. I found the solution and tried but it still does not auto refresh. I also tried adding a dummy string to my image(local0.jpg) so that the browser does not use cached image but no success. What am I doing wrong?
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
<script>
var imageObj=new Image();
imageObj.src="local0.jpg?dummy=8484744"
imageObj.onload=function()
{
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageObj,0, 0,canvas.width,canvas.height);
setTimeout(timedRefresh,1000);
}
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=8484749"
}
</script>
</body>
</html>
Try the following code
var imageObj = new Image();
imageObj.onload = function() {
drawOnCanvas();
setTimeout(timedRefresh, 1000);
}
// set src AFTER assigning load
imageObj.src = "local0.jpg?dummy=" + Math.random();
function timedRefresh() {
imageObj.src = "local0.jpg?dummy=" + Math.random();
//drawOnCanvas(); //flicker was due this line as it try to draw image load so i commented it... now it should work...
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}
your function timedRefresh add random values to image
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=" + Math.floor((Math.random() * 10000) + 1);
}

Drawing ends up all black

I'm trying to resize an image via HTML canvas, but when I display it, it displays all black.
My code
function onSuccess(imageData) {
var img = new Image();
img.src = imageData;
window.setTimeout(function() {
var maxSize = 200;
var canvas = document.createElement("canvas");
canvas.width = maxSize;
canvas.height = maxSize;
var ctx = canvas.getContext("2d");
ctx.drawImage(img.src, 0, 0, maxSize, maxSize);
dataurl = canvas.toDataURL("image/jpeg");
alert(dataurl);
}, 1000);
}
I'm not exactly sure what it is I'm doing incorrectly. Thanks for the help!

Lasso tool in html5 canvas

I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape.
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function() {
var OwnCanv = new fabric.Canvas('c', {
isDrawingMode: true
});
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 4
ctx.clip();
ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
This is my attempt which doesn't seem to work, what am I doing wrong here ?
Can anyone help me please? It would really be appreciated.
The image needs to be a fabric.Image.
You could try something like this:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function() {
var OwnCanv = new fabric.Canvas('c', {
isDrawingMode: true
});
var imgInstance = new fabric.Image(img, {
left: 0,
top: 0,
});
OwnCanv.add(imgInstance);
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 4
OwnCanv.on('path:created', function(options) {
var path = options.path;
OwnCanv.isDrawingMode = false;
OwnCanv.remove(imgInstance);
OwnCanv.remove(path);
OwnCanv.clipTo = function(ctx) {
path.render(ctx);
};
OwnCanv.add(imgInstance);
});
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
See these resources for more:
http://fabricjs.com/fabric-intro-part-1/
Multiple clipping areas on Fabric.js canvas
Fabric.js Clip Canvas (or object group) To Polygon

Categories