Html2canvas: Tidak bisa mendapatkan konten div dengan "display: none"
Hai, saya ingin mengambil tangkapan layar dari div yang disembunyikan
ini kode yang saya coba
HTML:
<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>
J:
var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){
$("body").append(canvas);
});
Kesalahan di Peramban:
**
TypeError Tidak Tertangkap: Tidak dapat membaca properti 'panjang' dari nullhtml2canvas @ html2canvas.js:941(fungsi anonim) @ HtmlPage. html:13
**
Biola saya
Tolong bantu saya dengan ini
Spartan-Arun
Semua 10 komentar
Html2canvas menafsirkan gaya tampilan: tidak ada dengan benar dan dengan demikian tidak akan membuat elemen tersembunyi. Untuk mencapai apa yang Anda inginkan, Anda benar-benar dapat memposisikan elemen yang terlihat dari viewport halaman (jika keinginannya adalah untuk "membuat elemen tersembunyi").
herringtown
pada 11 Mar 2016
Semoga bermanfaat.
Terima kasih !
atefBB
pada 27 Sep 2016
Ini berfungsi jika dan hanya jika div memiliki css yang bukan " display:none ". jadi saya menggunakan kombinasi .show() dan .hide() untuk membuat elemen terlihat dan disembunyikan untuk membentuk Canvas
Spartan-Arun
pada 4 Jan 2017
onclone: function(document) {
hiddenDiv = document.getElementById("render");
hiddenDiv.style.display = 'block';
}
Saya menemukan beberapa info di Internet. Kita dapat mengatur css ke div yang ditentukan dengan " display:none " lalu menambahkan opsi onclone seperti di atas. Tolong tambahkan opsi "loggin: true" untuk melihat apa yang terjadi
karsondang
pada 23 Jan 2017
Sebenarnya trik mengeluarkan wadah dari viewport dengan posisi absolut dan nilai negatif atas/kiri - tidak berfungsi di Firefox, itu melempar pengecualian NS_ERROR_FAILURE
Ini berfungsi meskipun di Chrome
nettiopsu
pada 14 Feb 2018
Saya mengalami masalah ini baru-baru ini, dan jika Anda ingin div tertentu tidak terlihat dan tangkapan layar, atur properti css sebagai
height: 0%
overflow:hidden
kchen1025
pada 7 Jun 2018
Ini tidak bekerja untuk saya @ kchen1025
chidiwilliams
pada 14 Jul 2018
Saya akhirnya membuat kanvas segera setelah div target, dan kemudian menyembunyikan div segera setelah kanvas dimuat. Flicker hampir tidak terlihat.
Kode saya terlihat seperti ini:
<div id="capture">
...
</div>
<div id="end"></div>
html2canvas(document.querySelector("#capture")).then(canvas => {
$("#end").append(canvas)
$("#capture").hide()
});
Halo, saya bekerja dengan Angular 6 dan "html2canvas" untuk membuat PDF dengan "jsPdf" .... Saya ingin mengambil tangkapan layar ke div tersembunyi dan saya tidak dapat melakukannya sampai saya MENCAPAInya
tangkapan dibuat ke div dengan id "html-pdf"
"HTML"
` Kartu Pelajar /a>
div id = "pdf" *ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">
/div
/div`
"js atau dalam sudut adalah TypeScript"
`unduh2 () {
var imgcab: string;
imgcab = this.base64logo.trim();
html2canvas (document.getElementById ('html-pdf'), {skala:2}). Kemudian (fungsi (kanvas) {
var img = canvas.toDataURL ("gambar / png", 1);
var doc = jsPDF baru ({
orientasi: 'p',
satuan: 'mm',
format: 'surat',
});
doc.addImage (img, 'PNG', 2,2,212.272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save('testCanvas.pdf');
});`
Dan yang paling penting adalah menyembunyikan div di dalam layar.
"CSS"
#pdf {
overflow: hidden;
height: 0;
}
kode membuat pdf dengan menangkap div "html-pdf" yang ada di dalam div "pdf" tersembunyi ...
Saya harap Anda melayani mereka
Saya menulis ini dalam bahasa Spanyol dan diterjemahkan, dari Chili;
kuraudeo
pada 27 Jul 2018
Saya pikir cara yang tepat untuk melakukan pekerjaan itu adalah dengan menggunakan properti onclone , https://stackoverflow.com/a/51049443/2251303
gamesover
pada 25 Jul 2019
Masalah terkait
anthonymejia
·
4Komentar
kunal886496
·
3Komentar
arzyu
·
3Komentar
deepender87
·
4Komentar
rrutkows
·
4Komentar
Komentar yang paling membantu
Halo, saya bekerja dengan Angular 6 dan "html2canvas" untuk membuat PDF dengan "jsPdf" .... Saya ingin mengambil tangkapan layar ke div tersembunyi dan saya tidak dapat melakukannya sampai saya MENCAPAInya
tangkapan dibuat ke div dengan id "html-pdf"
"HTML"
` Kartu Pelajar /a>
div id = "pdf" *ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">
/div
/div`
"js atau dalam sudut adalah TypeScript"
`unduh2 () {
var imgcab: string;
imgcab = this.base64logo.trim();
html2canvas (document.getElementById ('html-pdf'), {skala:2}). Kemudian (fungsi (kanvas) {
var img = canvas.toDataURL ("gambar / png", 1);
var doc = jsPDF baru ({
orientasi: 'p',
satuan: 'mm',
format: 'surat',
});
doc.addImage (img, 'PNG', 2,2,212.272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save('testCanvas.pdf');
});`
Dan yang paling penting adalah menyembunyikan div di dalam layar.
"CSS"
#pdf { overflow: hidden; height: 0; }kode membuat pdf dengan menangkap div "html-pdf" yang ada di dalam div "pdf" tersembunyi ...
Saya harap Anda melayani mereka
Saya menulis ini dalam bahasa Spanyol dan diterjemahkan, dari Chili;