Html2canvas: menyimpan elemen yang melampaui viewport

Dibuat pada 3 Nov 2017 · 4Komentar · Sumber: niklasvh/html2canvas

Saya mencoba menggunakan ini untuk menyimpan halaman, yang melampaui viewport tetapi terus terpotong. Apakah ada cara untuk menyimpan. di bawah ini adalah kode yang saya gunakan. ketika saya membuat elemen cukup kecil untuk muat di viewport itu berfungsi dengan baik tetapi gambar yang saya dapatkan terlalu kecil untuk apa yang saya butuhkan, dan memperbesar ukuran hanya membuat buram. Beberapa gambar ini dalam ukuran yang saya butuhkan adalah 1300px+ tinggi

`html2canvas(pratinjau, {
latar belakang: '#ffffff',
dirender: (kanvas)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

Sumber

dking3876

Komentar yang paling membantu

Anda dapat mencoba mengkloning konten elemen dan menambahkannya ke badan tepat saat pengambilan berlangsung, lalu menghapusnya. Sesuatu seperti

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs pada 8 Nov 2017

👍3

Semua 4 komentar

Jika elemen yang terkandung dalam wadah, div, modal, dll yang memiliki gulir dalam?

ffflabs pada 4 Nov 2017

Wadah langsung yang ingin saya tangkap tidak memiliki pengguliran tetapi wadah induk memilikinya. Saya akan mencoba meletakkan pengguliran pada wadah langsung dan melihat apakah itu berhasil

dking3876 pada 6 Nov 2017

Tidak baik. saya menyesuaikan sehingga wadah yang saya tangkap memiliki pengguliran untuk menunjukkan dom penuh, dan masih terpotong di bagian yang terlihat di layar.

ada pemikiran lain??

dking3876 pada 7 Nov 2017

Anda dapat mencoba mengkloning konten elemen dan menambahkannya ke badan tepat saat pengambilan berlangsung, lalu menghapusnya. Sesuatu seperti

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs pada 8 Nov 2017

👍3

Apakah halaman ini membantu?

0 / 5 - 0 peringkat