Bagaimana saya bisa mengambil tangkapan layar browser pada resolusi yang lebih tinggi daripada yang didukung browser saya?

97

Saya perlu mengambil screenshot situs web karena akan muncul pada monitor resolusi sangat tinggi ... katakanlah 4000x3000 piksel. Layar laptop saya memiliki resolusi asli 1400x768. Pada dasarnya, saya perlu mensimulasikan memiliki resolusi monitor yang jauh lebih tinggi daripada monitor saya dan kartu video sebenarnya mendukung. Saya ingin tangkapan layar situs terlihat cukup seperti ketika Anda menekan CTRL MINUS (perkecil) di Firefox berulang kali, tetapi tanpa kehilangan piksel karena penskalaan. Bagaimana saya bisa melakukan ini? Apakah ada cara untuk menggunakan perangkat lunak mesin virtual untuk mensimulasikan tampilan resolusi super tinggi? Jika tidak, adakah cara untuk membuka jendela peramban yang lebih besar dari layar, lalu menangkap isinya sebagai PNG? Adakah yang bisa bekerja?

browser virtual-machine resolution screenshot screen-capture Joshua Carmody
sumber
Anda mungkin mencoba untuk mengganti pengaturan dpi OS Anda. Saya percaya pada windows 8 itu membutuhkan perubahan nilai registri. Meskipun ini memberi Anda desktop raksasa, font-fontnya tentu saja juga berskala sehingga Anda harus lebih berusaha untuk membaca teks.
jiggunjer

Jawaban:

104

Anda dapat melakukannya dengan Firefox dan 2 ekstensi: Pengembang Web dan FireShot .

Setelah kedua ekstensi dipasang, buka Alat - Pengembang Web - Ubah Ukuran - Edit Ukuran Ubah Ukuran ....

Tambahkan ukuran baru, 4000 x 3000. centang "Ubah ukuran viewport" jika Anda hanya menginginkan konten halaman 4000x3000. Jika Anda tidak memeriksanya, jendela Firefox yang lengkap (dengan bilah alat, menu, ...) akan disetel ke dimensi ini.

teks alternatif

Setelah pada ukuran yang benar, pergi ke Alat - FireShot - Tangkap Seluruh Halaman dan .... Pilih tindakan, seperti Simpan misalnya. Ini akan menyimpan konten halaman yang telah ditetapkan oleh Pengembang Web ke ukuran yang diinginkan.

teks alternatif

Snark
sumber
@snark - Yah, itu hampir berhasil. Tetapi tampaknya ekstensi Pengembang Web tidak akan membiarkan saya membuat viewport lebih besar dari layar saya ...?
Joshua Carmody
@ Yosua: itu bekerja dengan baik untuk saya. Saya menguji sebelum memposting jawaban saya. Saya membuat tes baru tetapi tidak dapat menemukan tempat untuk menampung gambar sebesar itu
Snark
1
Pembaruan: Masalah yang tidak bisa membuat jendela menjadi lebih besar dari layar tampaknya merupakan batasan yang diberlakukan oleh OS Windows itu sendiri.
Joshua Carmody
@snark - Apakah Anda keberatan jika saya bertanya OS apa yang Anda jalankan?
Joshua Carmody
2
@snark - Ah. Mungkin itu adalah Windows XP (itulah yang saya terjebak di sini). Bagaimanapun, saya dapat mengatasinya dengan menggunakan FireBug untuk memasukkan DIV dengan style = "width: 4000px; height: 3000px;" ke dalam kode HTML, dan kemudian menggunakan FireShot, jadi saya masih bagus. Terima kasih telah menunjukkan FireShot. Itu membuat saya hidup lebih mudah. Saya telah menggulir dan mengambil tangkapan layar dari pada mengomposisinya secara manual sebelumnya. Itu adalah NYERI UTAMA.
Joshua Carmody
19

Sementara itu (setidaknya selama satu atau dua tahun - sejak versi 15, jika saya tidak salah), Firefox mendukung ini secara langsung melalui alat pengembang terintegrasi.

Baik tekan CtrlShift Matau pilih Tampilan Desain Responsif dari ikon Alat Pengembang di menu garis.

Itu akan memunculkan pandangan ini, yang akan memungkinkan Anda memilih dari serangkaian preset serta memasukkan resolusi yang diinginkan dan langsung menyimpan tangkapan layar dalam format PNG ke disk dengan satu klik:

masukkan deskripsi gambar di sini

Damon
sumber
1
Tombol tangkapan layar mungkin tidak berfungsi dengan baik ketika Anda mensimulasikan gambar hi-dpi dengan memperbesar. Dalam kasus itu, buka bilah alat pengembang Shift+ F2dan tempel screenshot --clipboard --fullpageke "konsol". Ini berbeda dari konsol JS biasa.
pisau
Ini juga berfungsi dengan mode pengujian perangkat konsol pengembang chrome. Opsi tangkapan layar ada di menu drop down di kanan atas.
Tully
Sayangnya ini sepertinya tidak berfungsi di Chrome; Saya hanya mencoba mengambil tangkapan layar viewport penuh di Chrome dari Microsoft Flow (karena Flow tidak akan ditampilkan dengan benar di Firefox, meskipun metode screenshot viewport penuh Firefox berfungsi) dan hanya mengambil screenshot dari ruang yang saat ini dilihat. ... dengan kata lain, tidak ada perbedaan antara opsi "tangkapan layar tangkapan layar" Chrome dan "tangkapan layar tangkapan layar ukuran penuh" ... payah.
TylerH
6

Saya menggunakan add FireFox pada yang disebut Abduction untuk membuat suntikan .png dari halaman web secara keseluruhan. Sayangnya add on belum diperbarui agar kompatibel dengan FireFox 3.6.

Sepertinya ScreenGrab akan melakukan hal yang sama.

Zooks64
sumber
5

Firefox 16 dan seterusnya sekarang berisi kemampuan untuk mengontrol ukuran viewport dengan konsol pengembang:

Buka Alat ... Pengembang Web ... Bilah Alat Pengembang

Ubah ukuran viewport dengan perintah ini:

resize to 5000 5000

Tangkapan layar dengan perintah ini:

screenshot output.png
Wayne Piekarski
sumber
4

Nah, dengan Linux (atau pengaturan Sistem X Window apa pun rasa) Anda dapat mengatur desktop virtual yang lebih besar dari monitor Anda. Anda gulir di dalamnya, tapi saya pikir Anda bisa memaksimalkan browser Anda dan screen shot itu.

Saya tidak tahu apakah ada cara untuk melakukannya di Windows atau OS X.

Ronald Pottol
sumber
3

Saya menemukan menggunakan layanan online seperti thumbalizr lebih mudah daripada menginstal plugin browser, jika Anda tidak perlu melakukan ini sering.

svick
sumber
1

Di Chrome ada beberapa ekstensi seperti:

Ada tangkapan layar laman web lain, tetapi saya tidak memiliki reputasi yang cukup untuk menerbitkan lebih dari dua tautan

titusfx
sumber