Qu'est-ce que cela signifie et comment cela aide-t-il?

Question

En ce moment, je suis en train de coder une application Web qui importe des données d'image à partir de Google Maps via l'API statique - http://code.google.com/apis/maps/documentation/staticmaps/ - dans un canevas HTML5. Malheureusement, j'ai rencontré le problème de ne pas être en mesure de manipuler les données de pixels de Google Maps en raison de restrictions inter-domaines.

Cependant, j'ai lu ce blog par M. Doob, l'une des personnes derrière la vidéo Wilderness Downtown (http://thewildernessdowntown.com) qui emploie la toile avec Google Maps - http://mrdoob.com/blog/post/705 - et il lit comme suit:

" Un autre défi était que vous n'aviez pas accès aux données de pixel des images chargées depuis un autre domaine ... Cependant, même si l'accès aux pixels est interdit, context.drawImage() est autorisé à copier des zones d'images hébergées sur d'autres domaines. "

Je pense que ce peut être la solution à mon problème plus tard dans l'après il montre la manipulation des pixels de l'image, mais je ne suis pas tout à fait exactement ce que cela signifie par « context.drawImage() est permis copier des zones à partir d'images hébergées sur d'autres domaines 'et il serait vraiment utile que quelqu'un puisse le clarifier pour moi.

Merci,

DLiKS

Edit: Voici le code que je utilise pour dessiner l'image de Google Maps sur la toile:

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

L'image affiche OK, mais lorsque je tente pour utiliser getImageData pour manipuler cette image intégrée sur le canevas, j'obtiens une erreur de sécurité

Answer 1

Après avoir lu l'article, je pense que vous avez mal interprété ce que Mr.doob dit:

« [Jamie], puis a commencé des recherches sur d'autres façons de dessin les cartes de données en une manière qui créerait le même effet. "

Il ne aucune manipulation de pixels, il utilise context.drawImage pour

"... culture colonnes de l'image originale et positionnement les uns après les autres horizontalement."

Answer 2

context.drawImage() Je crois que c'est une façon de manipuler un HTML 5 Ca nvas. Jetez un oeil à ces pages Web.

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

Answer 3

Assigner src à l'image à l'aide d'une page ASPX, et cette page ASPX répondra avec votre texte à l'image.

Par exemple:

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