Html2canvas: Html2canvas, kanvas dipotong saat menggunakan gambar putar

Dibuat pada 1 Jun 2017 · 22Komentar · Sumber: niklasvh/html2canvas

Halo,

Terima kasih banyak untuk proyek ini,
Saya menggunakan HTML2PDF, dan saya melihat masalah dengan memutar gambar di html2canvas.
ketika saya menggunakan gambar rotate, itu dipotong dari bawah dan kanan dan tidak diposisikan dengan benar, silakan lihat di sini: https://jsfiddle.net/yynmre4k/

Terima kasih,

Bug

Sumber

amine86

Semua 22 komentar

Hai @ amine86 , ini adalah masalah dengan cara html2canvas menangani kliping elemen yang diubah, yang mulai saya perbaiki dalam permintaan tarik ini . Saya telah membuat versi sederhana dari Fiddle Anda hanya dengan menggunakan html2canvas di sini (dan satu lagi menggunakan html2canvas asli, tanpa permintaan pull saya dimasukkan, di sini ).

Ini adalah masalah rumit yang menurut saya memerlukan penulisan ulang tentang bagaimana pemotongan dilakukan di html2canvas. Saya dapat memperbaiki masalah transform: translate() , tetapi rotasi adalah masalah lain yang tidak dapat saya selesaikan dengan cara yang sama.

eKoopmans pada 3 Jun 2017

👍1

Hai @eKoopmans terima kasih banyak atas

Terima kasih atas bantuan Anda

amine86 pada 5 Jun 2017

Hai @ amine86 , Anda mungkin beruntung dengan pendekatan ini, merender HTML melalui SVG dan kemudian menjadi kanvas:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Ada juga rasterizeHTML , yang mirip dengan html2canvas. Saya belum mencoba banyak pendekatan, beri tahu saya jika mereka berhasil untuk Anda!

eKoopmans pada 8 Jun 2017

👍1

Hai @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

amine86 pada 12 Jun 2017

Ceritakan tentang sesuatu, di 0.5.0-beta4 Anda menambahkan beberapa fungsi uji untuk ini. Dapatkah kita melihat di mana kode bagian itu untuk mencoba berkontribusi dan mengumpulkan beberapa hasil yang baik? Terima kasih!

CreativForm pada 20 Jun 2017

Hai @CreativForm , ya itu ide yang bagus, @eKoopmans dapatkah Anda membantu kami dalam hal ini?

amine86 pada 12 Jul 2017

Hai, saya tidak yakin fungsi pengujian mana yang Anda jelaskan. Anda dapat melihat pekerjaan yang telah saya lakukan untuk memperbaiki pemangkasan transformasi CSS di sini .

eKoopmans pada 13 Jul 2017

@eKoopmans Saya harap Anda baik-baik saja, ada berita tentang masalah ini?
Apakah Anda sudah menambahkan perbaikan ke modul html2PDF Anda?

Terima kasih,

amine86 pada 17 Okt 2017

Hai @ amine86 , saya baik-baik saja, terima kasih! Sayangnya tidak ada kemajuan ... Saya akhirnya mendapatkan waktu untuk kembali ke pengkodean sekarang, jadi saya akan melihat apakah saya dapat segera melakukannya.

eKoopmans pada 18 Okt 2017

Hai @eKoopmans , terima kasih atas balasan Anda, Semoga Anda bisa segera menyelesaikannya, terima kasih atas bantuan Anda

amine86 pada 18 Okt 2017

Halo @eKoopmans , saya harap Anda baik-baik saja, setiap upgrade pada modul "html2PDF" Anda untuk edisi rotasi ini?

Terima kasih,

amineeg pada 5 Des 2017

Tidak, tapi terima kasih atas pengingatnya. Anda mungkin telah memperhatikan bahwa saya baru saja kembali ke proyek setelah lama absen. Sepertinya @niklasvh baru saja merilis alpha v1.0.0 kemarin, yang mungkin memiliki beberapa jawaban!

@niklasvh jika Anda sedang membaca, maaf saya belum melakukan apa pun untuk membantu html2canvas. Saya harap ini berjalan dengan baik!

eKoopmans pada 6 Des 2017

Halo @eKoopmans terima kasih banyak atas tanggapan cepat Anda,
Ya saya menguji rilis terbaru, tetapi saya perhatikan bahwa selalu mendapat masalah yang sama saat menggunakan rotate (hasilnya dipotong),
Dalam rilis terakhir ini melewatkan "skala" yang Anda gunakan menjadi "html2pdf", apakah Anda menyediakan untuk menambahkannya ke dalamnya?

amineeg pada 6 Des 2017

@amineeg apakah Anda berbicara tentang rilis terbaru html2canvas atau html2pdf?

Rilis terbaru html2canvas memiliki opsi scale ditambahkan, meskipun tidak memiliki dpi . Ini belum membahas masalah pemotongan dan transformasi CSS ini.

eKoopmans pada 6 Des 2017

@eKoopmans ya anda benar, isinya berskala, semoga masalah rotasi ini segera teratasi.
Terima kasih banyak atas bantuan Anda.

amineeg pada 6 Des 2017

Saya memiliki masalah kliping dengan skala.
Saat menskalakan ke gambar yang lebih besar, ini berfungsi dengan baik (skala transformasi fe (1.4))
Ketika skala ke gambar yang lebih kecil itu klip gambar (fe skala transformasi (0.6))

feedyourmind pada 15 Feb 2018

Hai @eKoopmans , ada berita tentang masalah ini? Dapatkah kami membantu Anda mengatasi masalah rotasi ini?

CreativForm pada 26 Feb 2018

Halo @eKoopmans @CantikForm ,

Ada berita untuk bug ini?

Terima kasih,

amineeg pada 23 Mar 2018

Hai @amineeg Dari sisi saya tidak, saya menunggu @eKoopmans untuk mengatakan sesuatu. :)

CreativForm pada 26 Mar 2018

Terima kasih @CreativForm , @eKoopmans @niklasvh ada berita tentang masalah ini?

amineeg pada 27 Mar 2018

@eKoopmans Adakah gerakan tentang masalah ini?

TheOneAndOnlyZulu pada 11 Jul 2018

Coba gulir jendela ke atas dengan:

window.scrollTo(0,0);

Saya telah menguji sendiri solusi ini dan dapat menjamin bahwa solusi ini berhasil untuk saya - tampaknya ada bug dengan html2canvas.

Tidak yakin mengapa, tetapi bahkan ketika sebuah elemen benar-benar berada di luar layar, itu tidak menjadi masalah. Tetapi tidak digulirkan sepenuhnya ke atas adalah apa yang tampaknya menyebabkan gambar kanvas yang diambil keluar secara vertikal dengan berapa banyak yang telah digulir.

Hal ini menyebabkan gambar yang dihasilkan memiliki tinggi yang tepat tetapi mulai diimbangi dari atas dengan sejumlah X piksel, sehingga bagian atas gambar memiliki ruang kosong.

Referensi: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut