Geek Answers Handbook

What does this mean and how does it help?

I am currently encoding a web application that imports image data from Google Maps via the Static API - http://code.google.com/apis/maps/documentation/staticmaps/ - into HTML5 Canvas.

Unfortunately, I ran into the problem of the inability to manipulate pixel data from Google Maps due to cross-domain restrictions.

However, I read this blog post by Mr. Dob, one of the people behind the video in the desert ( http://thewildernessdowntown.com ) who uses the canvas with Google Maps - http://mrdoob.com/blog / post / 705 - and it reads:

"Another problem was that you do not have access to the pixel data of images downloaded from another domain ... However, although access to the pixel is prohibited, context.drawImage () from images hosted on other domains is allowed for copy areas" .

I feel that this may be the solution to my problem, since later in the message it shows the manipulation of the image of the image, but I do not quite understand what exactly this means, since for contexting.drawImage () it is allowed to copy areas from the image placed on other domains, "and it would be very helpful if someone could clarify this for me.

Thanks,

DLiKS

Edit: Here is the code that I use to draw a Google Maps image on 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 is displayed OK, but when I try to use getImageData to control this inline image on the canvas, I get an error

+6
javascript html5 canvas
source share
3 answers

After reading the article, I think you misinterpreted what Mr. Dodob said:

"[Jamie] then began exploring other ways to draw map data in such a way as to create the same effect."

It does not manipulate pixels , it uses context.drawImage to

"... crop the columns from the original image and position them horizontally one by one."

+3
source share

Assign src image with a single aspx page, and make the aspx page respond with your text to the image.

For example:

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

context.drawImage() I believe this is a way to manipulate an HTML 5 canvas. Take a look at these web pages.

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

-one
source share

More articles:


All Articles