Html2canvas: gedrehter Text durch CSS kann nicht von html2canvas erfasst werden

Erstellt am 28. März 2013  ·  13Kommentare  ·  Quelle: niklasvh/html2canvas

Ich habe CSS verwendet
.Überschrift 1 {
-moz-transform: rotieren(270deg);
-webkit-transform: rotieren(270deg) ;
-o-transformieren: drehen(270deg) ;
-ms-transformieren: rotieren(270deg) ;
transformieren: drehen (270deg);
Filter: progid:DXImageTransform.Microsoft.BasicImage (Rotation=4);
}
um eine gedrehte Überschrift für ein Diagramm anzuzeigen. Dann verwende ich html2cavas, um die Seite zu 'screenshot' zu machen, dieser gedrehte Text kann nicht richtig angezeigt werden. Es wird ein vertikaler Text, bei dem jeder Buchstabe horizontal platziert, aber vertikal aneinander ausgerichtet ist. und es sieht hässlich aus.

1
2

Feature

Hilfreichster Kommentar

Alle 13 Kommentare

CSS-Transformationen werden noch nicht unterstützt

danke für die Antwort. Ich muss dann eine andere Möglichkeit finden, diesen vertikalen Text anzuzeigen oder ihn stattdessen horizontal anzuzeigen.

Irgendeine Idee, wann dies unterstützt wird. Ich brauche das ziemlich dringend (insbesondere css3 matrix3d)

Versuchen Sie, den Textinhalt in einen Bereich einzufügen. Bei mir hat es funktioniert. Weiß aber immer noch nicht warum...

@MaitreyJukar Textinhalt in eine Spanne

Findet jemand eine Lösung für gedrehte Divs-Screenshots?

Ich zeige eine Infografik an, die Bilder, Diagramme und Text enthält. Da vertikaler Text in den Diagrammen nicht funktioniert, verwende ich canvg , um jedes dieser Diagramme (die in c3 SVG sind) in eine Leinwand zu konvertieren, oder gehe sogar noch einen Schritt weiter, um diese Leinwand in ein Bild zu konvertieren. Dies kann rekursiv für jede SVG-Gruppe im DOM erfolgen.

Wie kann ich div mit CSS-Transformation speichern: Perspektive?

Wie kann ich div mit CSS speichern -webkit-mask-box-image: url(http://kz-c2.qiniudn.com/a.svg); ?

@zk7035 Da jede CSS-Eigenschaft manuell erstellt werden muss, um unterstützt zu werden, gibt es eine Reihe von Eigenschaften, die noch nicht unterstützt werden. (https://github.com/niklasvh/html2canvas#browser-compatibility)

Details: https://github.com/niklasvh/html2canvas/issues/246

Drehen hat bei mir funktioniert, aber mit einer Spanne habe ich eine der obigen Antworten verwendet. Hier ist, was ich in meinem Stil gemacht habe Ich habe eine Klasse gemacht

.vertikal {
Position: absolut;
links: -50px;
oben: 0px;
Breite: 120px;
Höhe: 20px;
Schriftgröße : 12px;
Farbe:#333;
transformieren: drehen (270deg);
}

Das in meinem Element eine div-Position im Inline-Stil relativ und innerhalb des div eine Spanne mit der Klasse vertikal.

<div style="width:100%;float:left;text-align:left;height: 80px;margin-left:25px;border-left:1px solid #000;/*writing-mode: tb-rl;transform: rotate(-180deg);*/height: 100px;font-size:12px;position:relative;"><span class="vertical" style="top:20px;">Articulo No.</span></div>

Hoffe es hilft jemandem, saludos

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen