ฉันจะถ่ายภาพหน้าจอเบราว์เซอร์ที่ความละเอียดสูงกว่าเบราว์เซอร์ที่รองรับได้อย่างไร


97

ฉันต้องใช้ภาพหน้าจอของเว็บไซต์เพราะมันจะปรากฏบนหน้าจอความละเอียดสูงมาก ... ต้องบอกว่า 4000x3000 พิกเซล หน้าจอแล็ปท็อปของฉันมีความละเอียดดั้งเดิม 1400x768 โดยทั่วไปฉันต้องจำลองที่มีความละเอียดของจอภาพสูงกว่าจอภาพและการ์ดวิดีโอของฉันจริง ๆ แล้วรองรับ ฉันต้องการให้ภาพหน้าจอของไซต์ดูเป็นอย่างไรเมื่อคุณกด CTRL MINUS (ซูมออก) ใน Firefox ซ้ำ ๆ แต่ไม่มีการสูญเสียพิกเซลเนื่องจากการปรับขนาด ฉันจะทำสิ่งนี้ได้อย่างไร มีวิธีใช้ซอฟต์แวร์เครื่องเสมือนเพื่อจำลองการแสดงผลความละเอียดสูงพิเศษหรือไม่? หากไม่เป็นเช่นนั้นมีวิธีใดบ้างที่จะเปิดหน้าต่างเบราว์เซอร์ที่ใหญ่กว่าหน้าจอแล้วจับเนื้อหาเป็น PNG ได้หรือไม่ มีอะไรอีกที่อาจใช้งานได้


คุณอาจลองเปลี่ยนการตั้งค่า dpi ของระบบปฏิบัติการของคุณ ฉันเชื่อใน windows 8 มันต้องเปลี่ยนค่ารีจิสทรี แม้ว่าสิ่งนี้จะช่วยให้คุณมีเดสก์ท็อปขนาดใหญ่แน่นอนว่าแบบอักษรก็ปรับขยายได้เช่นกันดังนั้นคุณจึงต้องใช้สายตามากขึ้นในการอ่านข้อความ
jiggunjer

คำตอบ:


104

คุณสามารถทำมันได้ด้วย Firefox และ 2 ส่วนขยาย: นักพัฒนาเว็บและFireshot

เมื่อติดตั้งส่วนขยายทั้งสองแล้วให้ไปที่เครื่องมือ - นักพัฒนาเว็บ - ปรับขนาด - แก้ไขปรับขนาดมิติ ...

เพิ่มขนาดใหม่ 4000 x 3000 ทำเครื่องหมายที่ "ปรับขนาดวิวพอร์ต" หากคุณต้องการให้เนื้อหาของหน้าเว็บเป็น 4000x3000 เท่านั้น หากคุณไม่ตรวจสอบหน้าต่างทั้งหมดของ Firefox (พร้อมแถบเครื่องมือเมนู ... ) จะถูกตั้งเป็นมิตินี้

ข้อความแสดงแทน

เมื่อขนาดที่ถูกต้องไปที่เครื่องมือ - ไฟร์ช็อต - จับภาพหน้าทั้งหมดและ ... เลือกการกระทำเช่นบันทึกตัวอย่าง มันจะบันทึกเนื้อหาของหน้าเว็บที่นักพัฒนาเว็บกำหนดให้เป็นขนาดที่ต้องการ

ข้อความแสดงแทน


@snark - ก็เกือบจะใช้ได้แล้ว แต่ดูเหมือนว่าส่วนขยายนักพัฒนาเว็บจะไม่ให้ฉันทำให้วิวพอร์ตใหญ่กว่าหน้าจอของฉัน ... ?
Joshua Carmody

@ โจชัว: มันทำงานได้ดีสำหรับฉัน ฉันทดสอบก่อนโพสต์คำตอบของฉัน ฉันทำการทดสอบใหม่ แต่ไม่สามารถหาตำแหน่งที่จะจัดภาพใหญ่ได้
Snark

1
อัปเดต: ปัญหาที่ใหญ่กว่าหน้าจอไม่สามารถทำให้เป็นหน้าต่างเป็นข้อ จำกัด ที่กำหนดโดยระบบปฏิบัติการ Windows เอง
Joshua Carmody

@snark - คุณรังเกียจไหมถ้าฉันถามระบบปฏิบัติการที่คุณใช้อยู่
Joshua Carmody

2
@snark - Ah อาจเป็นสิ่งที่ Windows XP (นั่นคือสิ่งที่ฉันติดอยู่ที่นี่) ไม่ว่าในกรณีใดฉันสามารถแก้ไขได้โดยใช้ FireBug เพื่อแทรก DIV ด้วย style = "width: 4000px; height: 3000px;" ลงในโค้ด HTML แล้วใช้ FireShot ฉันก็ยังดีอยู่ ขอบคุณสำหรับการชี้ให้เห็น FireShot นั่นทำให้ฉันมีชีวิตที่ง่ายขึ้นมาก ฉันเลื่อนไปมาแล้วถ่ายภาพหน้าจอมากกว่าแต่งภาพด้วยตนเองก่อน มันเป็นวิชาเอก
Joshua Carmody

19

ในขณะเดียวกัน (อย่างน้อยหนึ่งปีหรือสองปี - ตั้งแต่เวอร์ชัน 15 หากฉันไม่เข้าใจผิด) Firefox สนับสนุนสิ่งนี้โดยตรงผ่านเครื่องมือนักพัฒนาที่ผสานรวม

กดCtrlShift MหรือเลือกResponsive Design Viewจากไอคอนเครื่องมือสำหรับนักพัฒนาในเมนูแถบ

ที่จะทำให้มุมมองนี้ซึ่งจะช่วยให้คุณเลือกจากชุดที่ตั้งไว้ล่วงหน้าเช่นเดียวกับการป้อนความละเอียดที่ต้องการใด ๆและบันทึกภาพหน้าจอในรูปแบบ PNG ไปยังดิสก์โดยตรงด้วยคลิกเดียว:

ป้อนคำอธิบายรูปภาพที่นี่


1
ปุ่มสกรีนช็อตอาจทำงานไม่ถูกต้องเมื่อคุณจำลองภาพ hi-dpi โดยการซูมเข้าในกรณีนั้นให้เปิดแถบเครื่องมือนักพัฒนาซอฟต์แวร์Shift+ F2และวางscreenshot --clipboard --fullpageลงใน "คอนโซล" สิ่งนี้แตกต่างจากคอนโซล JS ปกติ
ใบมีด

สิ่งนี้ยังทำงานร่วมกับโหมดการทดสอบอุปกรณ์คอนโซลนักพัฒนาซอฟต์แวร์โครม ตัวเลือกภาพหน้าจออยู่ในเมนูแบบเลื่อนลงที่ด้านบนขวา
ทัลลี

น่าเสียดายที่นี่ดูเหมือนจะไม่ทำงานใน Chrome ฉันเพิ่งลองถ่ายภาพหน้าจอ full-viewport ใน Chrome ของ Microsoft Flow (เนื่องจาก Flow ไม่แสดงอย่างถูกต้องใน Firefox แม้ว่าวิธีการจับภาพหน้าจอ full-viewport ของ Firefox นั้นใช้งานได้) และใช้ภาพหน้าจอของพื้นที่ที่ดูอยู่ในปัจจุบันเท่านั้น ... กล่าวอีกนัยหนึ่งไม่มีความแตกต่างระหว่างตัวเลือก "จับภาพหน้าจอ" ของ Chrome และ "จับภาพหน้าจอขนาดเต็ม" ... คนเกียจคร้าน
TylerH

8

สำหรับ Mac Paparazziสามารถช่วยได้เช่นใช้ GUI หรือใช้ไวยากรณ์ URL เช่น:

ปาปารัสซี่: (width = 4000, height = 3000, maxheight = 3000) ฉันจะถ่ายภาพหน้าจอของเบราว์เซอร์ที่ความละเอียดสูงกว่าที่เบราว์เซอร์ของฉันรองรับได้อย่างไร

ป้อนคำอธิบายรูปภาพที่นี่

รูปแบบ URL ได้ง่ายจะกลายเป็น bookmarklet Paparazzi ใช้เอนจิ้นการเรนเดอร์ WebKit


6

ฉันใช้ FireFox ที่เรียกว่าAbductionเพื่อสร้าง. png shot ของหน้าเว็บอย่างครบถ้วน น่าเสียดายที่ส่วนเสริมยังไม่ได้รับการอัปเดตให้เข้ากันได้กับ FireFox 3.6

ดูเหมือนว่าScreenGrabจะทำสิ่งเดียวกัน


5

Firefox 16 เป็นต้นไปมีความสามารถในการควบคุมขนาดของวิวพอร์ตด้วยคอนโซลนักพัฒนาซอฟต์แวร์:

เปิดเครื่องมือ ... นักพัฒนาเว็บ ... แถบเครื่องมือผู้พัฒนา

ปรับขนาด viewport ด้วยคำสั่งนี้:

resize to 5000 5000

การดักจับหน้าจอด้วยคำสั่งนี้:

screenshot output.png

4

ด้วยการตั้งค่า Linux (หรือการตั้งค่า X Window System ใด ๆ ) คุณสามารถตั้งค่าเดสก์ท็อปเสมือนที่ใหญ่กว่าจอมอนิเตอร์ของคุณ คุณเลื่อนดูมัน แต่ฉันคิดว่าคุณสามารถขยายเบราว์เซอร์ของคุณให้ใหญ่ที่สุดและสกรีนช็อตได้

ฉันไม่รู้ว่ามีวิธีที่จะทำได้ใน Windows หรือ OS X หรือไม่


3

ฉันพบว่าการใช้บริการออนไลน์เช่นthumbalizrง่ายกว่าการติดตั้งปลั๊กอินของเบราว์เซอร์หากคุณไม่จำเป็นต้องทำเช่นนี้บ่อย


1

ใน Chrome มีส่วนขยายที่ร้ายแรงเช่น:

มีภาพหน้าจอหน้าเว็บอื่น แต่ฉันไม่มีชื่อเสียงพอที่จะเผยแพร่มากกว่าสองลิงก์

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.