What Does This Mean and How Does It Help?

At the moment开发者_JAVA技巧 I'm coding a web application that imports image data from Google Maps via the Static API - http://code.google.com/apis/maps/documentation/staticmaps/ - into an HTML5 canvas.

Unfortunately, I've run into the problem of not being able to manipulate the pixel data from Google Maps due to cross domain restrictions.

However, I've been reading this blog post by Mr. Doob, one of the people behind the Wilderness Downtown video ( http://thewildernessdowntown.com ) which employs canvas with Google Maps - http://mrdoob.com/blog/post/705 - and it reads:

"An additional challenge was that with you don't have access to the pixel data of images loaded from another domain...However, albeit pixel access is forbidden, context.drawImage() is allowed for copying areas from images hosted on other domains."

I feel this may be the solution to my problem as later in the post it shows pixel manipulation of the image, but I don't quite get what exactly it means by 'context.drawImage() is allowed for copying areas from images hosted on other domains' and it would be really helpful if someone could clarify it for me.

Thanks,

DLiKS

Edit: Here is the code I'm using to draw the Google Maps image to the canvas:

var ctx = document.getElementById('canvas').getContext('2d'); 
var img = new Image(); 
img.src = 'LINK TO GOOGLE MAPS IMAGE'; 
img.onload = function(){ 
ctx.drawImage(img,0,0); 
}

The image displays OK but when I try to use getImageData to manipulate this embedded image on the canvas, I get a security error

Having read the article I think you misinterpreted what Mr.doob said:

"[Jamie] then started researching other ways of drawing the Maps Data in a way that would create the same effect."

He does no pixel manipulation, he uses context.drawImage for

"...cropping columns from the original image and positioning them one after the other horizontally."

Assign src to image using one aspx page, and that aspx page will respond with your text to the image.

For example:

image.src="CreateImage.aspx";
image.onload = function () {
    ctx.drawImage(image,5,5,width,height);
}

context.drawImage() i believe is some way of manipulating a HTML 5 Canvas. Take a look at these webpages.

http://dev.opera.com/articles/view/html-5-canvas-the-basics/
http://diveintohtml5.ep.io/canvas.html