Bagaimana cara mengambil tangkapan layar yang menyertakan elemen gulir di dalam halaman web di Firefox?

70

Saya perlu mengambil tangkapan layar dari seluruh halaman web. Triknya adalah saya perlu tangkapan layar untuk memasukkan seluruh isi elemen tunggal yang tidak muat di layar.

Ini adalah tabel kolom tunggal yang memiliki bilah gulir karena tingginya. Ini bukan IFRAME (yang akan mudah dimuat di tabnya sendiri).

Kolom berisi teks yang diformat dan beberapa gambar kecil.

Untuk halaman web yang panjang yang digulir, itu mudah untuk melakukan tugas ini. Tetapi bagaimana hal itu dapat dicapai ketika mengandung elemen individual di dalam halaman yang menggulung?

Agar lebih jelas, saya perlu menangkap seluruh halaman, bukan hanya elemen itu sendiri.

Saya ingin menyelesaikan ini menggunakan Firefox di Windows.

windows firefox scrolling screenshot capture RockPaperLizard
sumber
2
Pernah mempertimbangkan menyimpan halaman sebagai PDF? Tangkapan dengan metode ini adalah beberapa situs web memiliki "tampilan cetak" yang merupakan isi dari PDF, tetapi dalam beberapa kasus teknik ini dapat bekerja.
JakeGould
@JakeGould Terima kasih Jake. Apakah itu akan berfungsi untuk menggulir dan elemen dalam halaman?
RockPaperLizard
Welp, melewatkan bagian tentang elemen gulir. Itu terlalu istimewa bagi saya untuk mengomentari sehingga yang bisa saya katakan adalah saya tidak bisa percaya diri sekarang karena metode pencetakan PDF akan berfungsi. Semoga sukses dengan ide-ide lain yang disajikan di sini.
JakeGould
Mungkin bermanfaat: Plugin Firefox untuk menyimpan halaman yang dirender lengkap sebagai gambar pada Rekomendasi Perangkat Lunak .
CVn
Jika saya mengerti dengan benar, elemen gulir yang dipermasalahkan mungkin dipaksa kurang dari ketinggian penuh. Mengatur atribut gaya tinggi ke otomatis pada elemen itu dapat membantu.
tehwalris

Jawaban:

86

Saran saya adalah menggunakan fitur bawaan Firefox yang memungkinkan Anda mengambil tangkapan layar elemen DOM tunggal.

Cukup buka alat pengembang → Temukan elemen → Klik Kanan dan ambil tangkapan layar

masukkan deskripsi gambar di sini

Itu tidak berfungsi di salah satu situs internal saya jadi tidak bisa mengatakan itu akan bekerja untuk semua.

Perbarui setelah Edit OP:

Jika Anda bermaksud untuk merekam halaman penuh bersama dengan seluruh konten elemen DOM seperti yang ditunjukkan di bawah ini, Anda harus tinggal mengedit ketinggian elemen DOM tetapi ...

masukkan deskripsi gambar di sini

Ini akan mendorong banyak elemen DOM keluar dari viewport dan tangkapan layar atau AFAIK alat lain tidak akan menangkapnya, yang mengalahkan tujuan Anda, saya pikir.

Baca di bawah ini dari https://en.wikipedia.org/wiki/Screenshot

Tangkapan layar, tangkapan layar, tutup layar, tutup layar, dump layar, atau screengrab adalah gambar yang diambil oleh seseorang untuk merekam item yang terlihat yang ditampilkan pada monitor, televisi, atau perangkat output visual lainnya yang digunakan.

Jika saya benar-benar harus melakukannya dengan cara Anda, saya akan membuat GIF atau mengambil dua tangkapan layar satu halaman penuh dan hanya elemen DOM lainnya untuk digabung menjadi satu.

permainan kata-kata
sumber
Terima kasih banyak atas jawaban Anda (dan gambar yang bagus!), Tetapi sayangnya ini tidak menjawab pertanyaan. Saya perlu mengambil tangkapan layar dari seluruh halaman termasuk elemen, bukan hanya dari elemen itu sendiri.
RockPaperLizard
5
@RockPaperLizard sebenarnya jawaban @ pun TIDAK menjawab pertanyaan Anda ... dia hanya tidak menerapkannya pada kasus penggunaan Anda. Anda dapat mengikuti jawabannya tetapi memilih <body>elemen dan itu akan memberi Anda tangkapan layar yang diinginkan.
Digital Chris
2
Jika Anda mengedit ketinggian elemen DOM sehingga tidak ada scrollbar internal kemudian gunakan FireShot untuk menangkap seluruh halaman, itu harus berfungsi.
Saya bisa mendapatkan satu tangkapan layar seperti ini, tetapi tidak lebih. Itu masih menghasilkan suara rana kamera, hanya menempatkan apa pun di clipboard. Hal yang sama berlaku untuk perintah di toolbar pengembang, tidak ada file yang dibuat.
MrFox
@MrFox File png dibuat di folder Unduhan.
AxiomaticNexus
24

Anda dapat menggunakan perintah tangkapan layar dari Developer Toolbar:

  1. Tekan Shift+ F2untuk membuka bilah alat atau pilih dari menu Alat Pengembang Web.

  2. Di bilah alat, ketik perintah screenshot --fullpage fullpage.png.

Untuk menangkap satu elemen, Anda dapat menggunakan pemilih css dengan flag --sel misalnya 

screenshot --selector #hot-network-questions

akan memberi Anda gambar di bawah ini

masukkan deskripsi gambar di sini

topher
sumber
4
@RockPaperLizard Saya menemukan posting lain dengan jawaban yang sama dan OP diedit oleh Anda.
pun
@pun, terima kasih. Tapi saya perlu mengambil tangkapan layar seluruh halaman dengan elemen diperluas, bukan hanya elemen itu sendiri.
RockPaperLizard
Saya bisa mendapatkan satu tangkapan layar seperti ini, tetapi tidak lebih. Masih menghasilkan suara rana kamera, hanya saja bukan file. Hal yang sama berlaku untuk mengklik kanan elemen dalam mode pengembang dan menyalinnya seperti itu. Tidak ada gambar yang dikirim ke clipboard.
MrFox
8

Gunakan Mode Desain Responsif Firefox , atur lebar ke sesuatu yang normal dan ketinggian sedemikian sehingga cukup untuk mencakup seluruh halaman, klik tombol tangkapan layar (ikon kamera).

Ouroborus
sumber
4

Ada Perangkat Lunak bernama Snagit yang dapat menyelesaikan masalah Anda. Perangkat lunak ini dapat mengambil screenshot dalam berbagai jenis, seperti jendela gulir dan juga dapat merekam video.

Ini adalah aplikasi berbayar, tetapi memiliki uji coba juga tersedia.

Gurumurthy.G
sumber
jika Anda menemukan ini sebagai jawaban, tandai dan kirimkan dalam komentar. Apa artinya itu?
AL
3
@AL Pengguna ini tidak memiliki perwakilan yang cukup untuk komentar sehingga mereka memberikan jawaban dengan harapan akan dikonversi menjadi komentar oleh moderator.
MonkeyZeus
Saya telah menggunakan SnagIt selama bertahun-tahun. Ini adalah perangkat lunak yang sangat berguna.
Roy Tinker
2

Saya menggunakan Screenpresso . Ini memungkinkan Anda untuk mengambil tangkapan layar yang bergulir. Pada dasarnya Anda mengambil tangkapan layar, gulir ke bawah dan ambil yang lain dan seterusnya, lalu Screenpresso menyatukannya. Screenpresso juga gratis.

FYI, tombol pintas untuk menggulir tangkapan layar adalah WindowsKey + Shift + PrintScreen. Anda kemudian perlu mengklik jendela yang ingin Anda gulir. Ketika Anda sampai ke bagian selanjutnya untuk tangkapan layar, klik kanan, gulir ke bawah, klik kanan dan sebagainya. Jika Anda selesai, klik kiri dan mereka akan dijahit bersama. Pastikan untuk mendapatkan beberapa tumpang tindih pada setiap tangkapan layar agar proses penjahitan bekerja lebih baik.

garethb
sumber
1

Ada ekstensi yang disebut Nimbus Screen Capture yang sangat cocok untuk tugas ini.

Anda memiliki opsi untuk menangkap:

  • bagian yang terlihat dari halaman (berguna untuk tidak menyertakan elemen browser yang bertentangan dengan alt+ Print Scrn)
  • sebuah fragmen halaman (di mana Anda dapat mengarahkan kursor ke wilayah di layar untuk menemukan fragmen yang Anda inginkan - wilayah ini sesuai dengan elemen HTML yang mendasarinya)
  • area yang dipilih (Anda mengklik dan menarik secara manual di mana Anda ingin tangkapan layar, mendukung pengguliran sambil menyeret)
  • seluruh halaman

nimbus

Keith Hall
sumber
Terima kasih atas jawaban Anda, saya menghargainya. Sayangnya, sepertinya Nimbus Screen Capture tidak dapat menangkap seluruh konten elemen gulir di dalam halaman. Jika saya salah, bisakah Anda memberikan detail lebih lanjut tentang cara mencapai ini dengan alat itu?
RockPaperLizard
@RockPaperLizard Anda benar, sepertinya tidak mendukung ini - Saya berpikir bahwa mode fragmen akan mencakup elemen gulir, atau bahwa mode area yang dipilih akan bekerja tetapi, sementara jendela dapat digulir dalam mode ini, tampaknya elemen gulir tidak bisa.
Keith Hall
Terima kasih telah mengkonfirmasi bahwa saya tidak melihatnya. Mungkin mereka akan menambahkan fungsionalitas itu ke versi masa depan.
RockPaperLizard
0

Opsi untuk menyesuaikan semuanya pada satu halaman:

  • Gunakan <Ctrl>-untuk memuat semuanya di satu halaman
  • Putar layar Anda ke mode potret
  • Gunakan layar kedua dalam mode potret dan temukan di bawah yang pertama
  • Gabungkan semua hal di atas

Pilihan lain adalah mengambil screenshot dari bagian atas dari apa yang ingin Anda tangkap. Gulir ke bawah, ambil pemotretan layar berikutnya. Ulangi ini sampai Anda sudah menangkap semuanya.
Secara opsional: menggabungkan tangkapan layar menjadi satu gambar besar menggunakan editor gambar (mis. Gimp).

NZD
sumber
1
Sampai saya tiba di item # 4, saya pikir Anda hanya menyarankan untuk menggabungkan semua item! Saya membayangkan memiliki 20 layar dan menumpuknya satu di atas yang lain ... LOL. Lalu saya sampai ke # 4, dan belajar bahwa Anda bermaksud item yang akan digunakan secara individu atau gabungan.
RockPaperLizard
Tetapi jika Anda memperkecil halaman, tidak ada cara untuk memperkecilnya tanpa distorsi.
NiCk Newman
0

Untuk mengambil tangkapan layar, Anda dapat menambahkan Ekstensi seperti tangkapan layar yang mudah. Maka akan lebih mudah bagi Anda untuk mengambil screenshot.

pengguna606374
sumber