Versuchen, HTML-Div in Bild zu konvertieren. Unter Berücksichtigung Transform3D

Question

ich schon sehe How do I convert my entire div data into image and save it into directory without using canvas?

Und ich verwenden, um die html2canvas Bibliothek, und ich war in der Lage, ein Bild zu bekommen, aber es war nicht, wie ich es wollte, weil ich einen 3dtransfomed div innen hatte und das endgültige Bild tat halte diese Eigenschaft nicht.

Das Ergebnis der html2canvas lib Verwendung war:

Und was will ich ist bekommen so etwas wie dieses (blaue Punkte irrelevant sind):

I können Sie diesen HTML Code sagen: <div id=background><div id=pig style=transform: matrix3d(1,2,4,2,34,4,5,3,54,3,4,4)><img src=whatever/></div></div> Und ich möchte es in ein Bild umwandeln. Ich habe versucht, die html2canvas-Bibliothek zu verwenden, die sie in dem Post erwähnt haben, mit dem ich oben verbunden bin. Aber das Ergebnis war das erste Bild, das ich gepostet habe. Wie das Ergebnis aussehen soll, ist das zweite Bild. Also dachte ich, es war, weil das transform3d auf dem Schwein div nicht berücksichtigt wurde.

Answer 1

Ich würde empfehlen, das Bild, das Sie erhalten (was gut aussieht, aber nicht korrekt verzerrt), zu nehmen und es durch CSS-Transformationen laufen zu lassen.

Information about CSS 3D Transforms

This demo of skewing a 3D prism with CSS sollten Sie von besonderem Interesse sein