Html2canvas: Html2canvas, Leinwand beschnitten bei Verwendung von Bild drehen

Hallo @ amine86 , dies ist ein Problem damit, wie html2canvas das Abschneiden transformierter Elemente handhabt, das ich in dieser Pull-Anfrage behoben habe. Ich habe eine vereinfachte Version Ihrer Geige erstellt, die hier nur html2canvas verwendet (und eine, die die ursprünglichen html2canvas verwendet, ohne dass meine Pull-Anfrage hier enthalten ist ).

Es ist ein kniffliges Problem, von dem ich glaube, dass es eine Neufassung der Beschneidung in html2canvas erfordert. Ich konnte transform: translate() Probleme beheben, aber Rotationen sind ein anderes Problem, das ich nicht auf die gleiche Weise lösen kann.

Hallo @eKoopmans, vielen Dank für Ihre Hilfe. Leider kann ich dies nicht für mein Projekt verwenden, ohne dieses Problem beim Drehen zu beheben.

Danke für Ihre Hilfe

Hallo @ amine86 , vielleicht haben Sie Glück mit diesem Ansatz, HTML über eine SVG- Zeichenfläche zu rendern:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Es gibt auch rasterizeHTML , das html2canvas ähnelt. Ich habe beide Ansätze nicht viel ausprobiert, lass es mich wissen, wenn sie für dich funktionieren!

Hallo @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,

Erzählen Sie mir etwas, in 0.5.0-beta4 fügen Sie einige Testfunktionen hinzu. Können wir sehen, wo dieser Teilcode ist, um einen Beitrag zu leisten und einige gute Ergebnisse zu erzielen? Vielen Dank!

Hallo @CreativForm , ja, es ist eine gute Idee, @eKoopmans, können Sie uns dabei helfen?

Hallo, ich bin mir nicht sicher, welche Testfunktionalität Sie beschreiben. Sie können die Arbeit sehe ich zu fix gemacht habe CSS-Transformation Zuschneiden hier .

@eKoopmans Ich hoffe, dass es dir gut geht.
Haben Sie Ihrem Modul html2PDF bereits einen Fix hinzugefügt?

Vielen Dank,

Hey @ amine86 , mir geht es großartig, danke! Leider keine Fortschritte ... Ich habe endlich Zeit, mich wieder mit dem Codieren zu befassen, also werde ich sehen, ob ich es bald versuchen kann.

Hey @eKoopmans , danke für deine Antwort.

Hallo @eKoopmans , ich hoffe, dass es dir gut geht, irgendein Upgrade auf deinem Modul "html2PDF" für diese Ausgabe der Rotation?

Vielen Dank,

Nein, aber danke für die Erinnerung. Sie haben vielleicht bemerkt, dass ich erst nach einer langen Pause zum Projekt zurückgekehrt bin. Es sieht aus wie @niklasvh nur ein v1.0.0 alpha gestern veröffentlicht, dass einige Antworten halten kann!

@niklasvh Wenn Sie lesen, tut mir leid, ich habe nichts getan, um mit html2canvas zu helfen. Ich hoffe es läuft gut!

Hallo @eKoopmans, vielen Dank für Ihre schnelle Antwort.
Ja, ich habe die neueste Version getestet, aber ich habe festgestellt, dass bei der Verwendung einer Drehung immer das gleiche Problem aufgetreten ist (das Ergebnis ist beschnitten).
In dieser letzten Version wurde eine "Skala" übersehen, die Sie in "html2pdf" verwenden. Haben Sie angegeben, um sie hinzuzufügen?

@amineeg sprichst du über die neueste Version von html2canvas oder html2pdf?

In der neuesten Version von html2canvas wurde die Option scale hinzugefügt, obwohl sie nicht dpi . Dieses Problem mit Clipping und CSS-Transformationen wurde noch nicht behoben.

@eKoopmans ja du hast recht, es enthält rotationsproblem wird bald gelöst.
Vielen Dank für Ihre Hilfe.

Ich hatte das Clipping-Problem mit der Skalierung.
Wenn Sie auf ein größeres Bild skalieren, funktioniert dies einwandfrei (z. B. Transformationsskala (1.4)).
Bei der Skalierung auf ein kleineres Bild wird das Bild abgeschnitten (z. B. Transformationsskala (0,6)).

Hallo @eKoopmans , gibt es Neuigkeiten zu diesem Thema? Können wir Ihnen irgendwie helfen, dieses Rotationsproblem zu lösen?

Hallo @eKoopmans @CreativForm ,

Gibt es Neuigkeiten für diesen Fehler?

Vielen Dank,

Hallo @amineeg Von meiner Seite nein, ich warte @eKoopmans, um etwas zu sagen. :) :)

Vielen Dank an @CreativForm , @eKoopmans @niklasvh. Gibt es Neuigkeiten zu diesem Problem?

@eKoopmans Bewegung zu diesem Thema?

Versuchen Sie, das Fenster nach oben zu scrollen mit:

window.scrollTo(0,0);

Ich habe diese Lösung selbst getestet und kann dafür bürgen, dass sie für mich funktioniert hat - es scheint ein Fehler mit html2canvas zu sein.

Ich weiß nicht warum, aber selbst wenn ein Element vollständig außerhalb des Bildschirms liegt, ist dies kein Problem. Wenn jedoch nicht ganz nach oben gescrollt wird, scheint das aufgenommene Leinwandbild vertikal um den Betrag versetzt zu sein, um den man gescrollt hat.

Dies bewirkt, dass das resultierende Bild die richtige Höhe hat, jedoch von oben um die X-Pixel-Anzahl versetzt beginnt, sodass die Oberseite des Bildes einen Leerraum aufweist.

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