Html2canvas: Problema para generar la imagen del mapa (Google Maps)

El problema es que Google Maps usa la matriz de transformación CSS3, que no está completamente implementada en html2canvas.

¿como lo hago?

Imágenes de Google Maps (imágenes en servidor externo)?

Utilice proxy: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: Creo que es ilegal (acceder a mosaicos de mapas directamente desde otra computadora / proxy /). La única forma es usar CORS.

@bkralik proxy no es solo para que acceda a "sitios bloqueados", el término proxy significa algo más en caso de que el proxy para html2canvas sirva para hacer que la API de javascript abra imágenes de servidores externos como si estuviera en su sitio local.

El proxy realiza una descarga del servidor externo y html2canvas carga la imagen solo después de que se completa la descarga.

Lea esta http://en.wikipedia.org/wiki/Same_origin_policy para comprender el tema.

¿Cómo uso este proxy?

El enlace en el que ha pasado todos los enlaces al uso de proxy (en lenguajes php, C # (asp.net), python y VB (asp classic)).

Tal vez no hayas notado los enlaces a los proxies, entonces te daré aquí:
https://github.com/niklasvh/html2canvas/wiki/Proxies

Cuando se usa una biblioteca nueva, siempre es bueno leer el archivo README completo.

@brcontainer Sé lo que hace este proxy: cuando el cliente quiere hacer una captura de pantalla, el SERVIDOR descarga todas las imágenes a la carpeta local y luego el cliente las carga. Pero eso está mal, porque Google no permite el uso directo de sus servidores de tiempo, y desde su punto de vista, alguien está descargando montones de mosaicos al servidor sin ver la página web ...

estoy usando Java.
tienes un ejemplo para usar el proxy?

@brcontainer Y como mencioné, realmente hay un problema con las transformaciones CSS3, porque los mapas de Google que se ejecutan en Google Chrome las usan, por lo que el mapa no se puede ver en pantalla con la implementación actual. Créame, tuve este problema en el proyecto que escribí ...

@bkralik Entonces, ¿cómo puedo hacerlo?
¿tienes algún ejemplo?

También programo en Java (ya creé proxies en PHP, C # y VB), pero no estoy a tiempo para crear un proxy en Java, tal vez pueda hacerlo el domingo.

¿Su aplicación es JSP o "Java Desktop"?

@brcontainer Es una aplicación web que usa JSF, Primefaces, Javascript y Java

@DanielSBelo JSF framework Nunca usé,

[editado]
Acerca del soporte de transformaciones css, lea: https://github.com/niklasvh/html2canvas#contributing

@DanielSBelo , ¿encontraste una buena solución para esto? Estoy teniendo el mismo problema.

Guardar un mapa como lienzo funciona bien en Firefox, pero no puede guardar el mapa en Chrome. No creo que esté directamente relacionado con la transformación, pero es más probable que la forma en que Chrome maneja los COR. Sin embargo, estoy totalmente atascado tratando de encontrar una respuesta.

@TGOlson Es realmente un problema con las transformaciones CSS3, porque la versión actual de html2canvas es capaz de representar solo "un nivel" de transformación, no los apila.
Puede verificar que el problema está en las transformaciones simplemente jugando con los mapas de Google; por lo general, se proporciona una captura de pantalla como esta:

(En css, todo el mapa está posicionado correctamente, pero después de deshabilitar css3, esto sucede)
La única solución es implementar toda la pila de transformaciones css3. No sé, si está en progreso por Niklas, pero alguien debería hacerlo :-)

suscribiendo

También tengo el mismo problema, solo en Chrome. Estoy usando html2canvas-proxy-php. Otros navegadores funcionan bien. Simplemente faltan partes del mapa ... parece estar relacionado con cambiar el tamaño del mapa, agregar / eliminar superposiciones, etc.

Para su información, si necesita poner en marcha alguna funcionalidad de captura de mapas y ejecutarla rápidamente, siempre puede usar la API de mapas estáticos o streetview de Google. Básicamente, reconstruya lo que el usuario actual está mirando en el mapa ( map.getPov , etc.) y luego obtenga esa imagen estática de Google.

No creo que ese enfoque funcione con superposiciones

Me acabo de encontrar con este problema. Si no me equivoco, esta pregunta de stackoverflow presenta este problema y he ofrecido una solución al leer las transformaciones css3 y aplicarlas como posiciones CSS normales.

var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})

Quizás, las transformaciones css3 se podrían verificar y convertir automáticamente al posicionamiento CSS normal mientras se renderiza y luego se eliminan después de renderizar.

Tengo una función de captura de pantalla inconstante.
Funciona después de una recarga completa de la página (usando CTLR + R en Firefox)

aquí está mi código, lo que básicamente hace es generar una imagen 64 base / png de una imagen de impresión capturada de la ventana y el resultado final que puse en una etiqueta para ver si funciona.

Y aquí está la función

función ebfPrintScreen (nombrecomponente)
{
html2cavnas
([document.body],
{
registro: verdadero,
useCORS: verdadero,
onrendered: función (lienzo)
{
img = canvas.toDataURL ("imagen / jpg");

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

El objetivo principal es capturar la ruta del mapa de Google después de que se crea, pero como digo, a veces funciona, a veces no. ¿Alguna pista de lo que está pasando?

Estoy teniendo el mismo problema. Voy a tomar una imagen del mapa después de hacer zoom y desplazarme y porciones más grandes, para igualar todo el mapa, se envuelven en marrón claro de repente. Si alguien tiene una solución para esto en Chrome, hágamelo saber.

probé la solución de @mfirdaus , y funciona para la vista de mapa de noraml, sin embargo, en streetview, todavía está roto ... ¿alguien tiene el mismo problema?

Después de aplicar la solución de @mfirdaus , pude capturar la vista del mapa. Pero de alguna manera, este código a continuación hace que el mapa sea inutilizable (pero html2canvas usable):

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

¿Hay alguna forma de "restaurar" lo que está haciendo esa línea? Por ahora, estoy llamando a la función initMap nuevamente para que el mapa funcione después de llamar a la función html2canvas con el código de transformación.

¿El script anterior funciona para Google Maps v3?

Mi requisito es tomar una captura de pantalla de un mapa de Google v3 con una ruta dibujada en él.

Funciona muy bien en Firefox, pero en Chrome no hay marcador ni ruta. Ya estoy usando marcadores personalizados.

Tengo dificultades para depurar porque no hay ningún error en la consola y el registro es muy limitado.

¿Alguien ha resuelto el problema en Chrome? He probado los scripts de proxy en dos idiomas, pero ninguno parece marcar la diferencia.

Tengo un problema similar, copio / corté este código de Internet:

  if($.browser.safari) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

Funciona, pero si muevo el mapa con el controlador, no funciona. Trabajo con marcadores, polígonos, etc. También funciona en firefox (puedo mover el mapa) pero no en Chrome.

Alguna idea ?

Reparado !

La solución para Chrome que copié / pegué estúpidamente no se activó.

Hice esto :

  if(window.chrome) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

El selector muy largo en html2canvas es para tener un mapa sin botones ni opciones.

Ahora trabajo, gracias.

Gracias @GCorbel Funciona muy bien con tu solución.

Las soluciones anteriores funcionan para representar el mapa, pero faltan los controles superiores o están en la posición incorrecta. ¿Algunas ideas?

¿Sigue siendo un problema con la v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle .

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese con nosotros si tiene o encuentre las respuestas que necesitamos para que podamos investigar más.

@niklasvh Puedo confirmar que todavía es un problema con la última versión. Aquí hay un violín que creé mientras probaba este problema: http://jsfiddle.net/9agom947/4/

El violín muestra el problema como se describe en la pregunta de stackoverflow vinculada, no necesariamente lo que está en el OP de este hilo. Si no desplaza el mapa, no hay problema para copiar el mapa. Una vez que realice una panorámica del mapa, en Chrome pero no en FireFox, el mapa copiado estará en blanco fuera de la región que se cargó inicialmente.

La solución dada en este hilo parece resolver el problema.

@ Ananda-Pryana Probé su jsFiddle, sin embargo, la solución ya no parece funcionar. Hay alguna otra solucion ?

Gracias por adelantado.

Parece que la última versión de Google Map (v3.32) lanzada recientemente tiene un nuevo renderizador experimental.
https://developers.google.com/maps/documentation/javascript/releases

Esto ha roto la solución. Solo hice una prueba rápida, pero parece que ahora las cosas no funcionan por igual en todos los navegadores (no solo en Chrome), así que espero que eso facilite la reparación en la próxima versión de html2canvas.

Pero una solución rápida sería usar la versión anterior de gmap, donde la solución aún funcionaría bien.

@ Ananda-Pryana Sí, bajé la calificación de gmap, funcionó, gracias.

¡Gracias @ Ananda-Pryana! Tuve esto funcionando la semana pasada, luego lo moví a una nueva plataforma y pensé que el movimiento fue lo que lo rompió. Me estaba yendo por un agujero de rata asumiendo que el nuevo entorno era el culpable. Bajé a 3.30 y todo está bien.

Parece que en la nueva versión de Google Maps la transformación se aplica a los diferentes div. Usar la solución de @GCorbel pero con este selector (".gm-style> div: first> div: first> div: last> div") parece funcionar. Aunque todavía no lo he probado a fondo.

La sugerencia de mil maravillas en la versión más reciente. ¡Gracias!

Hmm, parece que este problema ha vuelto para mí, tengo que desplazarme por el mapa para ver el problema y cuando hago una panorámica y uso Html2Canvas para obtener la captura de pantalla, ¿algunas áreas se muestran en gris en blanco?

Para cualquiera de ustedes que esté lidiando con que se corten las capas superpuestas:
El selector de @GCorbel solo transforma la capa del mapa de Google. Si tiene otras superposiciones, tendrá que encontrar en qué div se encuentran (por ejemplo, $('.gm-style>div:first>div:first>div:first>div:first>div') era una de mis superposiciones divs y aplicar la misma transformación al css.

@mylesboone ¿cómo encontraste qué div son las capas superpuestas? Actualmente estoy luchando con el mismo problema de las capas superpuestas que se cortan.

Estoy usando GmapMarker y GmapPolyline como capas de superposición en este momento.

@sunghunOW
Puede encontrar una solución aquí https://github.com/niklasvh/html2canvas/issues/1568
Puede utilizar la herramienta de inspección de su navegador para ver qué div necesitarán transformación.

La mejor solución que he encontrado:

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

Esto me da lienzo no está definido .. ¿Debería el selector de elementos de la palabra fuera de la caja?

@hseeda ¡ Gracias! ¡Tu selector me estaba haciendo el truco!

Aquí está mi selector ligeramente modificado que funciona (al menos para mí, jaja)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Sin embargo, ahora está cortando el logotipo de Google, que siempre debe mostrarse para cumplir con los términos y condiciones :(

Bueno, bueno, solo clonaré el nodo o algo. He estado luchando contra este mapa por un tiempo: D

Esto funciona para mi:

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

El problema con el mapa en blanco o un error al generar el lienzo fue complicado, pero finalmente lo que lo solucionó fue agregar esta configuración:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

¡Gracias a @imlinus y @hseeda ! ¡Este selector funciona perfectamente para mí! e incluso conserva el logotipo de Google, ¡gracias!

@hseeda ¡ Gracias! ¡Tu selector me estaba haciendo el truco!

Aquí está mi selector ligeramente modificado que funciona (al menos para mí, jaja)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Sin embargo, ahora está cortando el logotipo de Google, que siempre debe mostrarse para cumplir con los términos y condiciones :(

Bueno, bueno, solo clonaré el nodo o algo. He estado luchando contra este mapa por un tiempo: D