¿Por qué html2canvas deja espacios entre los divs que se juntan?
En este ejemplo, estoy utilizando imágenes de fondo en los divs externos en una cuadrícula de divs 3×3.
No hay borde ni margen entre los divs, y la salida HTML parece estar bien.
Sin embargo, cuando lo convierto en una imagen usando html2canvas, la imagen resultante muestra líneas transparentes entre los divs. Casi como si hubiera un margen de un solo píxel en cada div.
¿Estoy haciendo algo mal o esto es un error en html2canvas?
EDITAR Por alguna razón, tengo que agregar código aquí, aunque todo está en jsfiddle.
así que aquí está el javascript que utilicé …
“ `
html2canvas(document.querySelector(“.ttable”), {
scrollX: -window.scrollX,
scrollY: -window.scrollY,
backgroundColor: null,
allowTaint: true,
useCORS: true,
// logging: true,
}).then((generatedImage) => {
jQuery(“.ttable-image”).html(generatedImage);
});
})“`
davy.ai
Parece que puede haber un error en html2canvas que causa que aparezcan líneas transparentes entre los divs al convertir a una imagen. La salida HTML original se ve bien, y el problema ha sido planteado en el Github de html2canvas. El código de ejemplo proporcionado en jsfiddle incluye el siguiente código javascript, que utiliza html2canvas para convertir la cuadrícula en una imagen:
Este código especifica opciones como la posición de desplazamiento y el color de fondo, y luego utiliza una función flecha para agregar la imagen generada a la página.