Html2canvas: Html2canvas, lienzo recortado al usar rotar imagen

Hola @ amine86 , este es un problema con la forma en que html2canvas maneja el recorte de elementos transformados, que comencé a corregir en esta solicitud de extracción . He creado una versión simplificada de su Fiddle usando solo html2canvas aquí (y una usando el html2canvas original, sin mi solicitud de extracción incorporada, aquí ).

Es un problema complicado que creo que requiere una reescritura de cómo se realiza el recorte en html2canvas. Pude solucionar transform: translate() problemas de

Hola @eKoopmans, muchas gracias por tu ayuda, lamentablemente no puedo usar esto en mi proyecto sin solucionar este problema de rotación, ¿sabías que algún complemento o script que funcione bien puede convertir html a lienzo o html a svg? ¿Incluso un truco que necesita para comprar una licencia?

Gracias por tu ayuda

Hola @ amine86 , es posible que tengas suerte con este enfoque, renderizando HTML a través de un SVG y luego en un lienzo:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

También está rasterizeHTML , que es similar a html2canvas. No he probado ninguno de los enfoques mucho, ¡avíseme si funcionan para usted!

Hola @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

Cuéntame algo, en 0.5.0-beta4 agregas algunas funciones de prueba para esto. ¿Podemos ver dónde está ese código de parte para intentar contribuir y obtener buenos resultados? ¡Gracias!

Hola @CreativForm , sí, es una buena idea, @eKoopmans ,

Hola, no estoy seguro de qué funcionalidad de prueba está describiendo. Puede ver el trabajo que he realizado para corregir el recorte de transformación CSS aquí .

@eKoopmans Espero que estés bien, ¿alguna noticia sobre este tema?
¿Ya agregaste una solución a tu módulo html2PDF?

Gracias,

Hola @ amine86 , ¡estoy muy bien, gracias! Desafortunadamente, no hay progreso ... Finalmente tengo algo de tiempo para volver a la codificación ahora, así que veré si puedo hacerlo pronto.

Hola @eKoopmans , gracias por tu respuesta, espero que puedas resolverlo pronto, gracias por tu ayuda

Hola @eKoopmans , espero que esté bien, ¿alguna actualización en su módulo "html2PDF" para este número de la rotación?

Gracias,

No, pero gracias por el recordatorio. Es posible que haya notado que acabo de regresar al proyecto después de una larga pausa. Parece que @niklasvh acaba de lanzar una versión alfa v1.0.0 ayer, ¡que puede contener algunas respuestas!

@niklasvh si está leyendo, lo siento, no he hecho nada para ayudar con html2canvas. ¡Espero que te vaya bien!

Hola @eKoopmans, muchas gracias por tu rápida respuesta,
Sí, probé la última versión, pero noté que siempre tenía el mismo problema al usar una rotación (el resultado se recorta),
En esta última versión faltaba una "escala" que la usaste en "html2pdf", ¿proporcionaste para agregarla?

@amineeg, ¿estás hablando de la última versión de html2canvas o html2pdf?

La última versión de html2canvas tiene la opción scale agregada, aunque no tiene dpi . Todavía no ha abordado este problema de recortes y transformaciones CSS.

@eKoopmans sí, tienes razón, contiene escala, espero que este problema de rotación se resuelva pronto.
Muchas gracias por su ayuda.

He tenido el problema del recorte con la escala.
Al escalar a una imagen más grande, funciona bien (escala de transformación fe (1.4))
Al escalar a una imagen más pequeña, recorta la imagen (escala de transformación fe (0,6))

Hola @eKoopmans , ¿alguna noticia sobre este tema? ¿Podemos ayudarlo de alguna manera a resolver este problema de rotación?

Hola @eKoopmans @CreativForm ,

¿Alguna noticia sobre este error?

Gracias,

Hola @amineeg Por mi parte no, espero que @eKoopmans diga algo. :)

Gracias @CreativForm , @eKoopmans @niklasvh ¿ Alguna noticia sobre este tema?

@eKoopmans ¿ Algún movimiento sobre este tema?

Intente desplazar la ventana hacia la parte superior con:

window.scrollTo(0,0);

Yo mismo he probado esta solución y puedo dar fe de que funcionó para mí; parece ser un error con html2canvas.

No estoy seguro de por qué, pero incluso cuando un elemento está completamente fuera de la pantalla, no es un problema. Pero no ser desplazado hasta la parte superior es lo que aparentemente parece hacer que la imagen del lienzo capturada salga compensada verticalmente por la cantidad de desplazamiento.

Esto hace que la imagen resultante tenga la altura correcta pero comience a desplazarse desde la parte superior por un número X de píxeles, haciendo que la parte superior de la imagen tenga un espacio en blanco.

Referencia: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut