Auto refresh html canvas image not working - javascript

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);
}

Related

I can't seem to load an Image to a PDF file using jsPDF

I am trying to generate a PDF document from a HTML document sing an input and a pre loaded image in my javascript code, here are the codes:
<html>
<head>
<title>
Generar pdf
</title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="generar();"></button>
<script src = "jsPDF-1.3.2/dist/jspdf.debug.js"></script>
<script src = "pdf.js"></script>
</body>
</html>
Javascript
var input = document.getElementById('jjj');
var pdf = new jsPDF();
function generar(){
var texto = input.value;
var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-
100.jpg';
pdf.addImage(imgData, 'JPG', 15, 40, 180, 160);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
And it won't work. It worked with jsut the text, but not the Image. Anyone help, would be very appreciated.
you cannot use direct image url. you need to convert image to base64 and then add it in pdf. Also, using external image will generate error in Chrome / Firefox due to Cross origin request.
Below is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="genratePDF();"></button>
<script src = "jspdf.debug.js"></script>
<script src = "jspdf.min.js"></script>
<script>
var input = document.getElementById('jjj');
// var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg';
var imgData = 'testimg.jpg';
function genratePDF() {
getDataUri(imgData, function (dataUri) {
generar(dataUri);
});
}
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
function generar(img) {
var texto = input.value;
var pdf = new jsPDF();
pdf.addImage(img, 'JPG', 15, 40, 100, 100);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
</script>
</body>
</html>
Main Changes are getDataUri() ; this function generates base64 image of your provided image. And then in Callback it triggers the generar() to generate PDF
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
this SO question helps me in this solution Convert a image url to pdf using jspdf

HTML canvas image is not showing

This is the code:
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="c" width="200" height="200">
</canvas>
<script>
var c = document.querySelector("#c");
var ctx = c.getContext("2d");
var image = new Image();
image.onLoad = function() {
console.log("Loaded Image");
ctx.drawImage(image, 0, 0, c.width, c.height);
};
image.src = "fry_fixed.jpg";
</script>
</body>
Canvas is getting created.
Image is not appearing.
I tried to debug it and found that the onLoad function is not working.
I can ensure you that image is in the same folder and the image name is correct.
But i still can't figure out why the code is not working!!
case matters, it's onload, all lowercase, not onLoad
image.onload = function() {...
or the more modern addEventListener
image.addEventListener('load', function() {...}, false);
Use onload instead of onLoad. Or even better, use an event listener!
var c = document.querySelector("#c");
var ctx = c.getContext("2d");
var image = new Image();
// Better use addEventListener, to be honest.
// image.onload = function() {
// ctx.drawImage(image, 0, 0, c.width, c.height);
// };
image.addEventListener('load', function(){
ctx.drawImage(image, 0, 0, c.width, c.height);
}, false)
image.src = "http://placehold.it/200x200";
<canvas id="c" width="200" height="200"></canvas>

Animate image js

I have 2 images on canvas and i want to make imageObg to animate. Actually i want it to make a linear move to the right.I found a way to animate an object like a rectangle but i cant animate an image object that i use from another source.
Is there anyway that can i manage to do i? Does anyone knows?
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 130);
};
imageObj2.onload = function() {
context.drawImage(imageObj2, 0, 0);
};
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
Just two things.
Set a periodically render routine using setInterval.
Set a move (or physics) routine, call it after each render.
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
imageObj.src = 'http://imageshack.com/a/img745/822/pXDK5F.png'
imageObj2.src = 'http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg'
window.setInterval(renderFrame, 50);
var ship = {
x: 69,
y: 130
};
function renderFrame() {
moveShip();
context.clearRect(0, 0, canvas.width, canvas.height);
if (imageObj.complete) {
context.drawImage(imageObj2, 0, 0);
}
if (imageObj.complete) {
context.drawImage(imageObj, ship.x, ship.y);
}
}
function moveShip() {
ship.x += 20;
if (ship.x > canvas.width) {
ship.x = 0 - imageObj.width;
ship.y = Math.random() * 250 + 50;
}
}
};
body {
background-color: black
}
<div id='d1' style="position:absolute; top:80px; left:150px; z-index:1">
<canvas id='myCanvas' width='962' height='500' style="border:10px solid #ffffff;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
Just increase the x position of the image with a setInterval command.
var img = document.createElement("IMG");
var img.src = [Image Source];
var x = 0;
window.setInterval(function() {
x ++;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, x, 0);
}, 50);
Hope this helps.
Edit:
Here is a JSFiddle Example.

Draw image on canvas with javascript

Why does nothing show up on the canvas? The picture is in the same folder as the code, I've tried to directly copy some code, and just change the sources, it still doesn't work. That leads me to believe, that it is not a fault in the actual way I draw the picture, but in the way I load the canvas?
I can add other stuff to the canvas, just not pictures.
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>
You most likely copied this code from somewhere and forgot to change the image object name
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imag, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>

unable to remove images in canvas : javascript

I am new to javascript. I am creating new images in my js file by saying
What I intend to is draw a new image and remove the previous one...
My code sample is :
var image = new Image();
image.src = 'abc.png';
ctx.drawImage(image, x, y,30,30);
and then I am using
ctx.clearRect(x, y, 30, 30);
but it does not clear the images drawn..
What should I do?
Thanks in advance
Check this HTML5 canvas tutorial for clear and redraw new image
Hope this can be helpful for you.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>

Categories