Html2canvas: Hanya merender apa yang terlihat

Entah bagaimana pada contoh Anda di beranda, itu menunjukkan semua yang ada di tubuh bahkan apa yang tidak terlihat ... bagaimana Anda melakukannya?

Kemungkinan duplikat dari: https://github.com/niklasvh/html2canvas/issues/117

Jadi Saya ingin tahu bagaimana cara menangkap elemen tertentu? apakah ada yang punya solusi?

@justein Coba ini

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

Saya dapat mengonfirmasi perilaku ini dengan versi terbaru. Ini akan membuat ukuran objek yang diminta dengan benar, tetapi tidak akan benar-benar membuat kanvas apa pun yang berada di luar layar dari viewport saat ini. Jadi jika

<div id="test-case">Test-me</div>

saat ini terlihat di browser, itu akan dirender. Jika di luar layar, kanvasnya kosong (tetapi ukurannya tepat). Terlihat sebagian: Dirender sebagian. Milik saya tidak bertindak seperti scrollHeight = 0, itu membuat apa pun yang terlihat ketika kode dijalankan. (Tombol saya ada di bagian bawah).

Seperti komentar btm, saya ingin tahu bagaimana melakukannya di situs contoh. Mungkinkah mengandalkan sesuatu di Angular atau Bootstrap untuk mendapatkan sumber daya di luar layar?

@cchubb Saya tidak mengerti apa yang harus dilakukan Angle dan Bootstrap dengan ini. Masalah John, menurut saya masalah rendering elemen tertentu.

Jika Anda ingin render yang berada di luar view-port, gunakan saja

html2canvas(document.body).then(function (canvas) {});

Jika Anda ingin membuat elemen "meluap" hapus "meluap" saat runtime dan tambahkan lagi setelah proses menggunakan javascript untuk menambahkan className, seperti ini:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

Atau arahkan saja html2canvas untuk merender elemen di dalam elemen dengan "overflow", seperti ini:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

Benar-benar memiliki banyak saran untuk fitur yang tidak perlu dari sudut pandang saya, cukup targetkan elemen DOM yang benar dan gunakan "CSS" sesuai keinginan mereka.

Saya menemukan jawabannya. Anda memperbaikinya di 0.5.0-alpha2. Jika saya menggunakan versi 0.5.0-alpha1 itu klip, tetapi versi alpha2 tidak. Saya bahkan tidak menyadari bahwa alpha2 tersedia karena halaman rilis berfokus pada alpha1.

Ini adalah biola yang menunjukkannya berfungsi sekarang dengan alpha2. https://jsfiddle.net/cchubb/fy7tw7ek/1/ jika Anda mengubah sumber daya eksternal kembali ke alpha1, itu akan terpotong ketika tautan bawah diklik. (Anda perlu menyimpan file unduhan sebagai .png untuk melihatnya, biola tidak akan membiarkan saya mengubah href jendela keluaran menjadi data.)

@btm1 , coba tingkatkan ke Alpha2.

@cchubb Saya akan mencobanya.

@cchubb masalah mendasar diperbaiki di alpha 2 dan Anda benar itu tersembunyi dengan baik, saya bahkan tidak menyadari ada alpha 2.

Hmm, bagi saya bahkan di alpha2 masih hanya bagian dari elemen yang "terlihat" di viewport yang di-render. Lihat http://jsfiddle.net/NPC42/ykvL6a17/ untuk demonstrasi—html2canvas hanya mengekspor baris yang di-scroll ke viewport (terlepas dari apakah baris tersebut terlihat di div container yang di-scroll atau tidak).

Apakah saya salah menyebut html2canvas? Ketika saya mengujinya pada kode saya yang sebenarnya (bukan yang JSFiddle, yang saya buat hanya untuk demo), saran ini membantu membuat seluruh elemen: https://github.com/niklasvh/html2canvas/issues/650 , tapi saya harap untuk menghindari peretasan perpustakaan.

@NPC Itu tidak akan hanya membuat apa yang tidak terlihat tanpa Anda melakukan apa pun, Anda harus mengubahnya menjadi terlihat meluap ---> ekspor dengan sangat cepat ---> lalu ubah kembali untuk menggulir lagi atau tidak akan berfungsi. IMO tidak ideal, saya pikir harus ada opsi untuk membuatnya berfungsi tetapi setidaknya itu berhasil.

@btm1 , ya, saya berasumsi bukan itu maksudnya, karena saya memasukkan elemen yang ada di dalam yang digulir, elemen itu sendiri tidak memiliki pemangkasan overflow.

Untuk saat ini di aplikasi saya, saya menemukan bahwa saya perlu memasang kembali seluruh elemen saya ke badan, memaksa lebar/tinggi tertentu di atasnya (karena mengandung elemen yang benar-benar diposisikan), sementara itu mencakup semua dapur ini dengan layar penuh "Mempersiapkan ekspor, harap tunggu", karena html2canvas membutuhkan 10+ detik untuk merender semuanya. Setelah render selesai—saya pasang kembali ke lokasi semula (di dalam wadah yang di-scroll), tidak menyetel lebar/tinggi.

Rumit, tapi berhasil.

Anehnya, itu hanya merender dari batas atas yang saat ini terlihat dari elemen yang diberikan.

Coba https://jsfiddle.net/bianjp/bpc3nq69/1/. Gulir ke "Print Screen" dan klik. Gambar yang dihasilkan tidak akan menyertakan baris teratas yang tidak terlihat saat diklik.
Menggunakan versi 0.5.0.beta4.

Solusinya adalah dengan memanggil $('html, body').scrollTop(0) (atau cara lain untuk membuat bagian atas elemen agar terlihat) sebelum memanggil html2canvas.

terima kasih @bianjp untuk perbaikan yang diusulkan.

Anehnya, itu hanya merender dari batas atas yang saat ini terlihat dari elemen yang diberikan.

Apakah itu perilaku yang normal ... Tampaknya sangat aneh bagi saya!

+1

Jawaban SO ini berhasil untuk saya.

Sebelum memanggil html2canvas, gulir elemen yang ingin Anda render ke viewport.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

Ini bekerja untuk saya.
Versi yang digunakan adalah 0.5.0-beta4.

Apakah ini masih menjadi masalah dengan v1.0.0 ? Jika demikian, dapatkah Anda membagikan contoh di jsfiddle .

Masalah ini telah ditutup secara otomatis karena belum ada tanggapan atas permintaan kami untuk informasi lebih lanjut dari penulis asli. Dengan hanya informasi yang sedang dalam masalah, kami tidak memiliki cukup informasi untuk mengambil tindakan. Harap hubungi jika Anda memiliki atau menemukan jawaban yang kami butuhkan sehingga kami dapat menyelidiki lebih lanjut.

Hei, @niklashvh

Saya juga menghadapi masalah untuk mengambil snapshot yang hanya terlihat oleh DOM. Saya memiliki versi 0.5.0-beta4
Jadi, saya setuju dengan solusi @ziyoung . Saya melakukan hal yang sama seperti yang dia sarankan.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

Jadi, saya mengatur posisi div di 0 atas ke badan dan kemudian memanggil html2canvas . Jadi sesuai pengalaman saya, saya merekomendasikan untuk menggunakan versi 0.5.0-beta4 oleh @eKoopmans sehingga Anda dapat menghindari masalah gambar pix-elation serta menangkap gambar penuh dari DOM.

Itu berfungsi di desktop tetapi tidak berfungsi di seluler

Apa yang saya lakukan adalah window.scrolTo(0,0) sebelum memanggil htmltocanvas(), jika Anda berada di atas layar, div dicetak selesai