Get Image src attribute value for HTML5 canvas element

I have been searching - am thinking what I want to do is not possible but thought I would check.

I have a few canvasses on an HTML page as follows: (these are IDs below)

• canvasMain - this is going to display a large version of an image
• canvasThumbnail1 - this is going to display a thumbnail image
• canvasThumbnail2 - same as above...etc

I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is imme开发者_如何学Cdiate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.

What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.

From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.

I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.

Any ideas? Thanks

Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.

The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.

In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.