CODEWITHSUNDEEP
javascripthtmlcanvas
DLiKS
DLiKS

Reputation: 1596

What Does This Mean and How Does It Help?

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

Upvotes: 6

Views: 328

Answers (3)

Sobha
Sobha

Reputation: 21

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);
}

Upvotes: 2

Jude Cooray
Jude Cooray

Reputation: 19862

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

Upvotes: -1

gblazex
gblazex

Reputation: 50109

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

Upvotes: 3

Related Questions