Geek Answers Handbook

How to get a remote image to display on canvas?

How to get images from the server?

I have this code that allows me to draw some images on canvas.

<html> <head> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('canv'); var ctx = canvas.getContext('2d'); for (i=0;i<document.images.length;i++){ ctx.drawImage(document.images[i],i*150,i*130); } } </script> </head> <body onload="draw();"> <canvas id="canv" width="1024" height="1024"></canvas> <img src="http://www.google.com/intl/en_ALL/images/logo.gif"> <img src="http://l.yimg.com/a/i/ww/beta/y3.gif"> <img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png"> </body> </html>

Instead of iterating over document.images, I would like to constantly get images from the server.

 for (;;) { /* how to fetch myimage??? */ myimage = fetch???('http://myserver/nextimage.cgi'); ctx.drawImage(myimage, x, y); }
+6
javascript image canvas
source share
5 answers

Use the built -in JavaScript image object .

Here is a very simple example of using an Image object:

 myimage = new Image(); myimage.src = 'http://myserver/nextimage.cgi';

Here is a more appropriate mechanism for your scenario from the comments on this answer.

Thank olliej

It is worth noting that you cannot synchronously request a resource, so you should really do something in accordance with:

 myimage = new Image(); myimage.onload = function() { ctx.drawImage(myimage, x, y); } myimage.src = 'http://myserver/nextimage.cgi';
+21
source share

If you want to draw an image on canvas, you also need to wait for the image to load, so the right thing is:

 myimage = new Image(); myimage.onload = function() { context.drawImage(myimage, ...); } myimage.src = 'http://myserver/nextimage.cgi';
+8
source share

To add an image to JavaScript, you can do the following:

 myimage = new Image() myimage.src='http://....'

If the image on your page has the identifier "image1", you can assign src of image1 to myimage.src.

+2
source share

I found that using prototypes is very useful here. If you are not familiar with them, prototypes are part of objects that allow you to set your own variables and / or methods.

Doing something like:

 Image.prototype.position = { x: 0, y: 0 } Image.prototype.onload = function(){ context.drawImage(this, this.position.x, this.position.y); }

Allows you to set position and draw on canvas without much difficulty.

The variable "position" allows you to move it on the canvas.
So you can do:

 var myImg = new Image(); myImg.position.x = 20; myImg.position.y = 200; myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

and the image automatically draws on canvas in (20,200).

The prototype works for all HTML and native Javascript objects. So

 Array.prototype.sum = function(){ var _sum = 0.0; for (var i=0; i<this.length; i++){ _sum += parseFloat(this[i]); } return _sum; }

gives a new function for all arrays.

but

 var Bob; Bob.Prototype.sayHi = function(){ alert("Hello there."); }

won't work (for several reasons, but I'll just talk about prototypes).
A prototype is a sort property that contains all your properties / methods that you enter and is already in each of the HTML and your own Javascript objects (and not the ones you do).
Prototypes also make calling easy (you can do "myImg.position.x" instead of "myImg.prototype.position.x").

Also, if you define a variable, you should do it more like this.

 var Bob = function(){ this.sayHi = function(){ alert("Hello there."); } }
+1
source share

If you use jQuery you can do:

 $.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');

You can also add width and everything else in the img tag.

-3
source share

More articles:


All Articles