ansaurus

Question

How to fetch a remote image to display in a canvas?

Answer 1

+7 A:

Use the built-in JavaScript Image object.

Here is a very simple example of using the 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.

Thanks olliej!

It's worth noting that you can't synchronously request a resource, so you should actually do something along the lines of:

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

spoon16 2008-10-02 19:44:43

It's worth noting that you can't synchronously request a resource, so you should actually do something along the lines of myimage.onload = function() { ctx.drawImage(myimage, x, y); } myimage.src = 'http://myserver/nextimage.cgi';

olliej 2008-10-03 03:02:50

Answer 2

+2 A:

To add an image in JavaScript you can do the following:

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

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

Diodeus 2008-10-02 19:47:04

You owe me a coke ;)

spoon16 2008-10-02 19:51:31

Answer 3

+1 A:

If you are using jQuery you can do:

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

You can also add widths and anything else in the img tag.

Darryl Hein 2008-10-02 19:55:03

Canvas doesn't display child elements, it's a programmable bitmap context you can draw to with JS, one of the API functions is drawImage() which takes an Image element/object and draws it into the buffer. It allows you to do nifty things that were previously not possible eg. http://canvaspaint.org/

olliej 2008-10-03 04:03:36

Now that I understand the question, I would give a different answer. :)

Darryl Hein 2008-10-06 18:24:31

Answer 4

+2 A:

If you want to draw an image to a canvas you also need to wait for the image to actually load, so the correct thing to do will be:

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

olliej 2008-10-03 02:03:55

ansaurus

tags:

views:

answers:

How to fetch a remote image to display in a canvas?

related questions