Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

207
Vistas
artefactos html2canvas e inconstancia al tomar una captura de pantalla del mapa de Google

Pocas cosas con html2canvas no son predecibles: a continuación se muestra una captura de pantalla del mapa en pdf.

Estoy usando html2canvas para tomar una captura de pantalla del mapa de Google y luego ponerlo en pdf usando php.

  • a veces, html2canvas mostrará una forma rectangular grisácea cerca del centro (en la imagen de abajo, la forma está a la derecha del marcador DV-2). A veces está ahí, a veces no, es incoherente en todos los navegadores modernos.
  • La mayoría de las veces, uno o más marcadores no mostrarán la etiqueta. En la imagen de abajo, el marcador azul a la derecha no tiene marcador.

En el mapa, antes de tomar la captura de pantalla, la forma gris no está allí y todos los marcadores tienen una etiqueta visible.

¿Alguna idea/sugerencia de por qué está sucediendo? Como mencioné anteriormente, es impredecible, a veces esa forma no aparece y, a veces, todas las etiquetas de los marcadores son visibles.

Noté que los marcadores sin etiqueta se colocan primero en el mapa (cuando consuelo.log()). Está sucediendo en html2canvas, no después. A continuación se muestra el método vue.js que captura la captura de pantalla.

 genAndSubmit() { let xCrop = (this.dimensions.vw - this.dimensions.pw) / 2 this.form.processing = true; html2canvas(document.querySelector("#mapWrapper"), { useCORS: true, logging: true, width: this.dimensions.pw, x: xCrop, // allowTaint: true, // foreignObjectRendering: true, // imageTimeout: 30000, // scale: 2, }) .then(canvas => { this.form.image = canvas.toDataURL('image/png'); this.submit(); }); },

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Después de probar diferentes cosas aquí están mis soluciones:

  • Forma rectangular cerca del centro : aumenté la escala en la configuración de html2canvas(document.querySelector("#mapWrapper"),{scale: 1.001,})
  • Algunas etiquetas de marcador no son visibles : aumenté el zIndex:9 para el marcador.
  • La ventana de información de Google Maps no muestra contenido
    • Eliminar la sombra de la ventana de información #mapWrapper .gm-style .gm-style-iw-c {box-shadow: none !important;}
    • Utilice V1.0.0 de html2canvas . En mis pruebas, la versión más reciente no mostraba el contenido de la ventana de información.
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda