What Does This Mean and How Does It Help?

Question

Hi!

At the moment 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

Answer 1

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.org/canvas.html

Answer 2

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."