Html2canvas: texto girado por CSS não pode ser capturado por html2canvas

Criado em 28 mar. 2013 · 13Comentários · Fonte: niklasvh/html2canvas

Eu usei css
.Cabeçallho 1 {
-moz-transform: girar (270deg);
-webkit-transform: girar (270deg);
-o-transformada: girar (270deg);
-ms-transform: girar (270deg);
transformar: girar (270deg);
filtro: progid: DXImageTransform.Microsoft.BasicImage (rotação = 4);
}
para exibir um título girado para um gráfico. então eu uso html2cavas para fazer uma 'captura de tela' da página, este texto girado não pode ser exibido corretamente. Tornou-se um texto vertical no qual cada letra é colocada horizontalmente, mas alinhada umas com as outras verticalmente. e parece feio.

Feature

Fonte

xiangcao

Comentários muito úteis

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

jjoe64 em 31 out. 2015

❤2 👍2

Todos 13 comentários

As transformações css ainda não são suportadas

niklasvh em 28 mar. 2013

obrigado por responder. Então, tenho que descobrir outra maneira de exibir esse texto vertical ou, em vez disso, exibi-lo horizontalmente.

xiangcao em 29 mar. 2013

Qualquer ideia de quando isso terá suporte. Eu meio que preciso disso (css3 matrix3d em particular)

Jelle-S em 19 abr. 2013

Tente adicionar o conteúdo do texto em um intervalo. Funcionou para mim Ainda não sei porque ...

MaitreyJukar em 25 jun. 2014

@MaitreyJukar quebrar o conteúdo do texto em um intervalo não funciona para mim, triste

luck2011 em 31 jan. 2015

Alguém encontrou alguma solução para a captura de tela dos divs girados?

checking12 em 15 set. 2015

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

jjoe64 em 31 out. 2015

❤2 👍2

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

brcontainer em 2 nov. 2015

Estou exibindo um infográfico que contém imagens, gráficos e texto. Uma vez que o texto vertical nos gráficos não funciona, o que estou fazendo é usar canvg para converter cada um desses gráficos (que estão em c3 SVG) em uma tela, ou até mesmo dar um passo adiante para converter essa tela em uma imagem. Isso pode ser feito recursivamente para qualquer grupo SVG no DOM.

ffflabs em 2 nov. 2015

Como posso salvar div com CSS transform: perspectiva?

Drons2p em 7 ago. 2016

Como posso salvar div com CSS -webkit-mask-box-image: url (http://kz-c2.qiniudn.com/a.svg); ?

zk7035 em 20 out. 2016

@ zk7035 Como cada propriedade CSS precisa ser construída manualmente para ser suportada, há várias propriedades que ainda não são suportadas. (https://github.com/niklasvh/html2canvas#browser-compatibility)

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

brcontainer em 20 out. 2016

Girar funcionou de mim, mas com um intervalo, usei uma das respostas acima. Aqui está o que eu fiz no meu estilo coloquei uma aula

.vertical {
posição: absoluta;
esquerda: -50px;
topo: 0px;
largura: 120px;
altura: 20px;
tamanho da fonte
cor: # 333;
transformar: girar (270deg);
}

no meu elemento, uma posição div inline com estilo relativo e dentro da div uma extensão com classe vertical.

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

Espero que ajude alguém, saludos