Cosa significa e come aiuta?

Question

Al momento sto codificando un'applicazione Web che importa i dati delle immagini da Google Maps tramite l'API Static - http://code.google.com/apis/maps/documentation/staticmaps/ - in un canvas HTML5.

Purtroppo, ho riscontrato il problema di non essere in grado di manipolare i dati dei pixel da Google Maps a causa di restrizioni incrociate del dominio.

Tuttavia, ho letto questo post del blog dal Sig Doob, una delle persone che stanno dietro il video Wilderness Downtown (http://thewildernessdowntown.com), che impiega tela con Google Maps - http://mrdoob.com/blog/post/705 - e si legge:

" Un'altra sfida è stata che con voi non avete accesso ai dati dei pixel delle immagini caricate da un altro dominio ... Tuttavia, anche se l'accesso ai pixel è vietato, context.drawImage() è consentito per copiare le aree da immagini ospitate su altri domini. "

mi sento questa potrebbe essere la soluzione al mio problema, come più avanti nel post mostra la manipolazione dei pixel dell'immagine, ma non riesce quasi mai che cosa esattamente intende per 'context.drawImage() è consentito per copiare le aree da immagini ospitate su altri domini 'e sarebbe davvero utile se qualcuno potesse chiarirle per me.

Grazie,

DLiKS

Edit: Ecco il codice che sto usando per disegnare l'immagine di Google Maps alla tela:

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'immagine mostra OK, ma quando provo per usare getImageData per manipolare questa immagine incorporata sulla tela, ottengo un errore di sicurezza

Answer 1

Dopo aver letto l'articolo penso che male interpretato quello che Mr.doob detto:

"[Jamie] quindi iniziato la ricerca di altri modi di disegno le mappe di dati in un modo per creare lo stesso effetto. "

Fa nessuna manipolazione pixel, si usa per context.drawImage

"... ritaglio colonne dell'immagine originale e posizionamento una dopo l'altra orizzontale."

Answer 2

context.drawImage() credo sia un modo di manipolare un HTML 5 Ca nvas. Dai un'occhiata a queste pagine web.

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

Answer 3

Assegna src di immagine utilizzando una pagina aspx, e che la pagina aspx risponderà con il testo all'immagine.

Ad esempio:

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