Html2canvas: el texto rotado por CSS no puede ser capturado por html2canvas

Creado en 28 mar. 2013 · 13Comentarios · Fuente: niklasvh/html2canvas

Yo usé css
.heading1 {
-moz-transform: rotar (270 grados);
-webkit-transform: rotar (270 grados);
-o-transformar: rotar (270 grados);
-ms-transform: rotar (270 grados);
transformar: rotar (270 grados);
filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = 4);
}
para mostrar un título rotado para un gráfico. luego utilizo html2cavas para hacer una "captura de pantalla" de la página, este texto girado no se puede mostrar correctamente. Se convierte en un texto vertical en el que cada letra se coloca horizontalmente pero alineada entre sí verticalmente. y se ve feo.

Feature

Fuente

xiangcao

Comentario más útil

solución alterna:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

jjoe64 en 31 oct. 2015

❤2 👍2

Todos 13 comentarios

las transformaciones CSS aún no son compatibles

niklasvh en 28 mar. 2013

gracias por responder. Luego tengo que encontrar otra forma de mostrar ese texto vertical o mostrarlo horizontalmente.

xiangcao en 29 mar. 2013

Cualquier idea sobre cuándo será compatible. Necesito esto bastante mal (css3 matrix3d en particular)

Jelle-S en 19 abr. 2013

Intente agregar el contenido de texto en un intervalo. Funcionó para mí. Aunque todavía no sé por qué ...

MaitreyJukar en 25 jun. 2014

@MaitreyJukar envolver el contenido del texto en un lapso no funciona para mí, triste

luck2011 en 31 ene. 2015

¿Alguien encuentra alguna solución para la captura de pantalla divs rotada?

checking12 en 15 sept. 2015

solución alterna:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

jjoe64 en 31 oct. 2015

❤2 👍2

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

brcontainer en 2 nov. 2015

Muestro una infografía que contiene imágenes, gráficos y texto. Dado que el texto vertical en los gráficos no funciona, lo que estoy haciendo es usar canvg para convertir cada uno de esos gráficos (que están en c3 SVG) en un lienzo, o incluso ir un paso más allá para convertir dicho lienzo en una imagen. Esto se puede hacer de forma recursiva para cualquier grupo SVG en el DOM.

ffflabs en 2 nov. 2015

¿Cómo puedo guardar div con CSS transform: perspectiva?

Drons2p en 7 ago. 2016

Cómo puedo guardar div con CSS -webkit-mask-box-image: url (http://kz-c2.qiniudn.com/a.svg); ?

zk7035 en 20 oct. 2016

@ zk7035 Como cada propiedad CSS debe construirse manualmente para ser compatible, hay una serie de propiedades que aún no son compatibles. (https://github.com/niklasvh/html2canvas#browser-compatibility)

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

brcontainer en 20 oct. 2016

Rotar me funcionó, pero con un lapso utilicé una de las respuestas anteriores. Esto es lo que hice en mi estilo le puse una clase

.vertical {
posición: absoluta;
izquierda: -50px;
arriba: 0px;
ancho: 120px;
altura: 20px;
tamaño de fuente: 12px;
color: # 333;
transformar: rotar (270 grados);
}

en mi elemento, una posición div en línea con estilo relativo y dentro del div un intervalo con clase 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 ayude a alguien, saludos