¿Qué significa esto y cómo lo ayuda?

Question

En este momento estoy codificando una aplicación web que importa datos de imagen de Google Maps a través de la API estática - http://code.google.com/apis/maps/documentation/staticmaps/ - en un lienzo de HTML5.

Desafortunadamente, me he encontrado con el problema de no poder manipular los datos de píxeles de Google Maps debido a restricciones de dominios cruzados.

Sin embargo, he estado leyendo esta entrada del blog por el Sr. Doob, una de las personas que están detrás del video de Wilderness Downtown (http://thewildernessdowntown.com) que emplea lienzo con Google Maps - http://mrdoob.com/blog/post/705 - y se lee:

" Un desafío adicional fue que con usted no tiene acceso a los datos de píxel de las imágenes cargadas desde otro dominio ... Sin embargo, aunque el acceso a píxeles está prohibido, context.drawImage() está permitido para copiar áreas de imágenes alojadas en otros dominios. "

me siento esto puede ser la solución a mi problema, ya que más adelante en el post que muestra la manipulación de píxeles de la imagen, pero no lo entiendo muy bien qué es exactamente lo que entiende por 'context.drawImage() está permitido copiar áreas de imágenes alojadas en otros dominios 'y sería realmente útil si alguien pudiera aclararlo por mí.

Gracias,

DLiKS

Editar: Aquí está el código que estoy usando para dibujar la imagen de Google Maps a la lona:

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

La imagen muestra bien, pero cuando intento para usar getImageData para manipular esta imagen incrustada en el lienzo, aparece un error de seguridad

Answer 1

Después de leer el artículo que creo que malinterpretado lo Mr.doob dijo:

"[Jamie] y luego comenzó a investigar otras formas de dibujo los mapas de datos en una forma que crearía el mismo efecto ".

Lo hace ninguna manipulación de píxeles, se utiliza para context.drawImage

"... cultivo columnas de la imagen original y posicionamiento ellos uno tras otro en sentido horizontal."

Answer 2

context.drawImage() Creo que es una forma de manipular un HTML 5 Ca nvas. Eche un vistazo a estas páginas web.

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

Answer 3

Asignar src en la imagen mediante una página aspx, y que aspx responderá con su texto a la imagen.

Por ejemplo:

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