Html2canvas: teks yang diputar oleh CSS tidak dapat ditangkap oleh html2canvas

Dibuat pada 28 Mar 2013 · 13Komentar · Sumber: niklasvh/html2canvas

Saya menggunakan css
.heading1 {
-moz-transform: memutar (270 derajat);
-webkit-transform: rotate(270deg);
-o-transform: memutar (270 derajat);
-ms-transform: rotate(270deg);
mengubah: memutar (270 derajat);
filter: progid:DXImageTransform.Microsoft.BasicImage (rotasi=4);
}
untuk menampilkan judul yang diputar untuk bagan. kemudian saya menggunakan html2cavas untuk 'menangkap layar' halaman, teks yang diputar ini tidak dapat ditampilkan dengan benar. Ini menjadi teks vertikal di mana setiap huruf ditempatkan secara horizontal tetapi sejajar satu sama lain secara vertikal. dan terlihat jelek.

Feature

Sumber

xiangcao

Komentar yang paling membantu

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

jjoe64 pada 31 Okt 2015

❤2 👍2

Semua 13 komentar

transformasi css belum didukung

niklasvh pada 28 Mar 2013

terima kasih telah membalas. Saya kemudian harus mencari cara lain untuk menampilkan teks vertikal itu atau menampilkannya secara horizontal.

xiangcao pada 29 Mar 2013

Ada ide kapan ini akan didukung. Saya agak membutuhkan ini (khususnya css3 matrix3d)

Jelle-S pada 19 Apr 2013

Coba tambahkan konten teks ke dalam rentang. Itu berhasil untuk saya. Masih tidak tahu mengapa meskipun ...

MaitreyJukar pada 25 Jun 2014

@MaitreyJukar membungkus konten teks menjadi rentang tidak berfungsi untuk saya, sedih

luck2011 pada 31 Jan 2015

Adakah yang menemukan solusi untuk tangkapan layar div yang diputar?

checking12 pada 15 Sep 2015

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

jjoe64 pada 31 Okt 2015

❤2 👍2

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

brcontainer pada 2 Nov 2015

Saya menampilkan infografis yang berisi gambar, bagan, dan teks. Karena teks vertikal di bagan tidak berfungsi, yang saya lakukan adalah menggunakan canvg untuk mengonversi setiap bagan tersebut (yang ada dalam c3 SVG) menjadi kanvas, atau bahkan melangkah lebih jauh untuk mengonversi kanvas tersebut menjadi gambar. Ini dapat dilakukan secara rekursif untuk grup SVG mana pun di DOM.

ffflabs pada 2 Nov 2015

Bagaimana saya bisa menyimpan div dengan transformasi CSS: perspektif?

Drons2p pada 7 Agu 2016

Bagaimana saya bisa menyimpan div dengan CSS -webkit-mask-box-image: url(http://kz-c2.qiniudn.com/a.svg); ?

zk7035 pada 20 Okt 2016

@zk7035 Karena setiap properti CSS perlu dibuat secara manual agar didukung, ada sejumlah properti yang belum didukung. (https://github.com/niklasvh/html2canvas#browser-compatibility)

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

brcontainer pada 20 Okt 2016

Putar berfungsi dari saya tetapi dengan rentang saya menggunakan salah satu jawaban di atas. Inilah yang saya lakukan dengan gaya saya, saya menempatkan kelas

.vertikal {
posisi: mutlak;
kiri: -50px;
atas: 0 piksel;
lebar: 120 piksel;
tinggi: 20 piksel;
ukuran font:12px;
warna: #333;
mengubah: memutar (270 derajat);
}

di elemen saya posisi div relatif bergaya inline dan di dalam div rentang dengan kelas 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>

Semoga membantu seseorang, saludos