Html2canvas: le texte pivoté par CSS ne peut pas être capturé par html2canvas

Créé le 28 mars 2013 · 13Commentaires · Source: niklasvh/html2canvas

j'ai utilisé css
.heading1 {
-moz-transform : rotation (270 degrés);
-webkit-transform : rotation (270 degrés);
-o-transform : rotation (270deg) ;
-ms-transform : rotation (270 degrés);
transformation : rotation (270 degrés);
filtre : progid:DXImageTransform.Microsoft.BasicImage (rotation=4) ;
}
pour afficher un titre pivoté pour un graphique. Ensuite, j'utilise html2cavas pour « capturer l'écran » de la page, ce texte pivoté ne peut pas être correctement affiché. Il devient un texte vertical dans lequel chaque lettre est placée horizontalement mais alignée les unes avec les autres verticalement. et ça a l'air moche.

Feature

Source

xiangcao

Commentaire le plus utile

solution de contournement:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

jjoe64 le 31 oct. 2015

❤2 👍2

Tous les 13 commentaires

les transformations css ne sont pas encore prises en charge

niklasvh le 28 mars 2013

merci d'avoir répondu. Je dois ensuite trouver un autre moyen d'afficher ce texte vertical ou de l'afficher horizontalement à la place.

xiangcao le 29 mars 2013

Une idée de quand cela sera pris en charge. J'en ai un peu besoin (css3 matrix3d en particulier)

Jelle-S le 19 avr. 2013

Essayez d'ajouter le contenu du texte dans une plage. Cela a fonctionné pour moi. Je ne sais toujours pas pourquoi cependant...

MaitreyJukar le 25 juin 2014

@MaitreyJukar envelopper le contenu du texte dans une étendue ne fonctionne pas pour moi, triste

luck2011 le 31 janv. 2015

Quelqu'un a-t-il trouvé une solution pour la capture d'écran des divs pivotés?

checking12 le 15 sept. 2015

solution de contournement:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

jjoe64 le 31 oct. 2015

❤2 👍2

@ jjoe64 https://github.com/niklasvh/html2canvas/issues/209#issuecomment -152904727

brcontainer le 2 nov. 2015

J'affiche une infographie qui contient des images, des graphiques et du texte. Étant donné que le texte vertical dans les graphiques ne fonctionne pas, ce que je fais, c'est d'utiliser canvg pour convertir chacun de ces graphiques (qui sont en c3 SVG) en un canevas, ou même aller encore plus loin pour convertir ledit canevas en image. Cela peut être fait de manière récursive pour n'importe quel groupe SVG dans le DOM.

ffflabs le 2 nov. 2015

Comment puis-je enregistrer div avec CSS transform: perspective ?

Drons2p le 7 août 2016

Comment puis-je enregistrer div avec CSS -webkit-mask-box-image : url (http://kz-c2.qiniudn.com/a.svg) ; ?

zk7035 le 20 oct. 2016

@zk7035 Comme chaque propriété CSS doit être créée manuellement pour être prise en charge, un certain nombre de propriétés ne sont pas encore prises en charge. (https://github.com/niklasvh/html2canvas#browser-compatibility)

Détails : https://github.com/niklasvh/html2canvas/issues/246

brcontainer le 20 oct. 2016

La rotation a fonctionné pour moi, mais avec un intervalle, j'ai utilisé l'une des réponses ci-dessus. Voici ce que j'ai fait dans mon style j'ai mis une classe

.vertical {
position : absolue ;
gauche : -50px ;
haut : 0px ;
largeur : 120px ;
hauteur : 20px ;
taille de police : 12 px ;
couleur : #333 ;
transformation : rotation (270 degrés);
}

le dans mon élément une position div en ligne de style relatif et dans le div une étendue avec la classe verticale.

<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>

J'espère que ça aide quelqu'un, salut