<p>html2canvas tidak berfungsi jika html berisi elemen kanvas</p>

Dibuat pada 13 Des 2017  ·  29Komentar  ·  Sumber: niklasvh/html2canvas

Laporan bug:

Saya menggunakan html2canvas dalam Proyek reaksi. Saya menemukan bahwa html2canvas tidak berfungsi ketika html berisi elemen kanvas. Area kanvas akan terlihat kosong.

Spesifikasi:

ini adalah gambar html
image

ini adalah konversi ke gambar kanvas

image

di area kanvas, saya menggunakan 'echarts-for-react' untuk menggambar peta Radar。Tetapi ketika saya klik Tombol Hasilkan gambar , gambar yang dowload tidak lengkap

  • html2canvas versi diuji dengan: 1.0.0-alpha.4
  • Browser & versi: Chrome 60.0.3112.7
  • Sistem operasi: windows
Bug

Komentar yang paling membantu

Saya sudah mencoba menambahkan removeContainer: false, tetapi masalahnya masih ada di Chrome seluler

Semua 29 komentar

Saya memiliki masalah yang sama.

Bisakah Anda membagikan contoh di jsfiddle?

permasalahan yang sama. Saya memiliki grafik chartjs di halaman, mereka tidak lagi merender. digunakan untuk merender di versi sebelumnya

Saya telah membuat biola untuk menunjukkan masalahnya
https://jsfiddle.net/outerbound/v7p71wzr/

Ini tidak berfungsi di chrome :(, saya dapat mengonfirmasi di safari bahwa ini berfungsi :)

Masalahnya adalah menghapus wadah dari DOM sebelum merender

Saya memiliki masalah yang sama. penanda ...

Mungkin html2canvas tidak dapat bekerja dengan gridstack.js

Memiliki masalah yang sama dengan menggunakan chart.js dengan vue (vue-chart.js) dan itu hanya terjadi di Chrome

Saya memiliki masalah yang sama, html2canvas tidak dapat bekerja dengan gridstack.js, ketika saya menggunakan html2canvans dengan gridstack, semua elemen ditumpuk di atas.
image

@ Nemo0915 Saya membuat jsfiddle dengan gridstack.js, tetapi berfungsi dengan baik. Jadi mungkin itu bukan masalah gridstack.js, tetapi saya tidak terlalu yakin.

masalah yang sama, Firefox baik-baik saja tetapi Chorme tidak dapat berfungsi

@bigfacewo thanks for your reply, itu screenshot jsfiddle kamu, tombolnya sudah di tumpuk ke atas juga, dan hasilnya sama baik di FF maupun Chrome.
image

@ Nemo0915 Saya menemukan versi 0.5.0-beta4 bekerja normal, jsfiddle . tangkapan layarnya adalah:
qq 20171220150328
Versi 1.0.0-alpha4, jsfiddle , tidak dapat berfungsi di chrome, Tapi saya tidak menemukan masalah bahwa elemen ditumpuk di atas. ini tangkapan layar di Firefox:
qq 20171220150946

Versi Chrome: 63.0.3239.108
Versi Firefox: 57.0.2

Anda dapat menambahkan opsi: removeContainer: false untuk memperbaiki masalah ini sementara ....

Terima kasih @IxAres , ini memecahkan masalah saya.

Saya sudah mencoba menambahkan removeContainer: false, tetapi masalahnya masih ada di Chrome seluler

@niklasvh tidak bekerja sama sekali. Saya menggunakan versi 1.0.0-rc.5 dari aplikasi ini.
Screenshot 2020-02-17 at 10 54 42 AM

hei, solusi apa?

2020 masalahnya masih ada.

+1 Saya juga melihat perilaku ini.

Masalah masih ada

Masalah masih ada dengan browser Chart.js dan Firefox 76.0 (64-bit)

Halo, saya mendapatkan masalah yang sama dengan Mapbox di dalam elemen, bisakah Anda membantu di sini.
Saya juga mencoba removeContainer: false tetapi tidak berhasil untuk saya.

@Rajeshgtstpl Saya memiliki masalah serupa dengan mapbox. Saya menyelesaikannya dengan menyetel preserveDrawingBuffer: true di opsi kotak peta.

Saya tidak menggunakan Chart.js, tetapi memiliki masalah yang sama dengan kanvas di mana saya menggunakan drawImage. Selesaikan masalah dengan meletakkan image.crossOrigin = 'anonymous' pada elemen gambar sebelum meneruskannya ke drawImage, seperti ini:

image.crossOrigin = 'anonymous'

Semoga bisa membantu seseorang :)

Hai teman-teman, saya mengalami masalah ekspor kanvas yang serupa tetapi dengan adegan threejs, ada rekomendasi? Saya telah mencoba dengan v1.0.0-rc.7 tetapi mengekspor semuanya kecuali kanvas threejs.

EDIT: Saya mencoba menambahkan kanvas threejs seperti ini:

image

Tapi mendapat kesalahan ini:

image

@AchoArnold preserveDrawingBuffer: true bekerja untuk saya di Mapbox, terima kasih.

Pertanyaan: apakah Anda memperhatikan dampak kinerja?

Saya tidak menggunakan Chart.js, tetapi memiliki masalah yang sama dengan kanvas di mana saya menggunakan drawImage. Selesaikan masalah dengan meletakkan image.crossOrigin = 'anonymous' pada elemen gambar sebelum meneruskannya ke drawImage, seperti ini:

image.crossOrigin = 'anonymous'

Semoga bisa membantu seseorang :)

itu menyelamatkan hidup saya, terima kasih

Apakah halaman ini membantu?
0 / 5 - 0 peringkat