วิธีถ่ายภาพหน้าจอที่มีองค์ประกอบการเลื่อนภายในเว็บเพจใน Firefox ได้อย่างไร

ฉันจำเป็นต้องจับภาพหน้าจอของหน้าเว็บทั้งหมด เคล็ดลับคือฉันต้องการภาพหน้าจอเพื่อรวมเนื้อหาทั้งหมดขององค์ประกอบเดียวที่ไม่พอดีกับหน้าจอ

เป็นตารางคอลัมน์เดียวที่มีแถบเลื่อนเนื่องจากความสูง ไม่ใช่ IFRAME (ซึ่งจะง่ายต่อการโหลดในแท็บของตัวเอง)

คอลัมน์มีข้อความที่จัดรูปแบบและรูปภาพขนาดเล็ก

สำหรับหน้าเว็บที่เลื่อนไปมานานมันเป็นเรื่องเล็กน้อยที่จะทำงานนี้ แต่จะทำอย่างไรจึงจะสำเร็จเมื่อมีองค์ประกอบแต่ละอย่างในหน้าเว็บที่เลื่อน?

เพื่อความชัดเจนฉันต้องจับทั้งหน้าไม่ใช่แค่องค์ประกอบเอง

ฉันต้องการทำสิ่งนี้โดยใช้ Firefox บน Windows

ข้อเสนอแนะของฉันคือการใช้คุณสมบัติในตัวของ Firefoxที่ช่วยให้คุณถ่ายภาพหน้าจอขององค์ประกอบ DOM เดียว

เพียงเปิดเครื่องมือนักพัฒนา→ค้นหาองค์ประกอบ→คลิกขวาแล้วจับภาพหน้าจอ

มันไม่ทำงานบนหนึ่งในเว็บไซต์ภายในของฉันดังนั้นจึงไม่สามารถพูดได้ว่ามันจะใช้ได้สำหรับทุกคน

อัปเดตหลังจากแก้ไขของ OP:

หากคุณต้องการบันทึกแบบเต็มหน้าพร้อมกับเนื้อหาองค์ประกอบ DOM ทั้งหมดดังที่แสดงด้านล่างคุณควรแก้ไขความสูงขององค์ประกอบ DOM แต่ ...

มันกำลังผลักองค์ประกอบ DOM จำนวนมากออกจากวิวพอร์ตและสกรีนช็อตหรือ AFAIK เครื่องมืออื่น ๆ จะไม่จับภาพซึ่งเป็นจุดประสงค์ของคุณฉันคิดว่า

อ่านด้านล่างจากhttps://en.wikipedia.org/wiki/Sc Screenshot

สกรีนช็อตจับภาพหน้าจอฝาปิดหน้าจอฝาปิดหน้าจอหรือ screengrab เป็นภาพที่บุคคลถ่ายเพื่อบันทึกรายการที่มองเห็นได้ที่ปรากฏบนจอภาพโทรทัศน์หรืออุปกรณ์แสดงผลภาพอื่น ๆ ที่ใช้งานอยู่

ถ้าฉันต้องทำในแบบของคุณจริงๆฉันจะสร้าง GIF หรือจับภาพหน้าจอสองภาพเต็มหน้าเดียวและองค์ประกอบ DOM อื่น ๆ เท่านั้นที่จะรวมเข้าเป็นหนึ่งเดียว

คุณสามารถใช้คำสั่ง screenshot จาก Toolbar Developer:

1. กดShift+ F2เพื่อเปิดแถบเครื่องมือหรือเลือกจากเมนูเครื่องมือสำหรับนักพัฒนาเว็บ

2. screenshot --fullpage fullpage.pngในแถบเครื่องมือให้พิมพ์คำสั่ง

ในการจับองค์ประกอบเดียวคุณสามารถใช้ css selector กับแฟล็ก --selector เช่น

screenshot --selector #hot-network-questions

คุณจะได้รับภาพด้านล่าง

ใช้โหมดการออกแบบการตอบสนองของ Firefox ตั้งค่าความกว้างเป็นสิ่งปกติและความสูงเช่นนั้นเพียงพอที่จะล้อมทั้งหน้าให้คลิกปุ่มภาพหน้าจอ (ไอคอนกล้อง)

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

มันเป็นแอปพลิเคชันที่ต้องชำระเงิน แต่ไม่มีการทดลองใช้

ผมใช้Screenpresso มันช่วยให้คุณถ่ายภาพหน้าจอเลื่อน โดยพื้นฐานแล้วคุณจะจับภาพหน้าจอเลื่อนลงแล้วจดอีกหน้าจอแล้ว Screenpresso จะรวมเข้าด้วยกัน สกรีนฟรี

FYI ปุ่มลัดสำหรับการเลื่อนหน้าจอคือ WindowsKey + Shift + PrintScreen จากนั้นคุณต้องคลิกหน้าต่างที่คุณต้องการเลื่อน เมื่อคุณไปที่ส่วนต่อไปของสกรีนช็อตคลิกขวาเลื่อนลงคลิกขวาและต่อไปเรื่อย ๆ เมื่อคุณทำเสร็จแล้วคลิกซ้ายและพวกเขาจะถูกเย็บเข้าด้วยกัน ตรวจสอบให้แน่ใจว่าได้รับการทับซ้อนกันในแต่ละภาพหน้าจอเพื่อให้กระบวนการเย็บทำงานได้ดีขึ้น

มีส่วนขยายที่เรียกว่าNimbus Screen Captureซึ่งเหมาะอย่างยิ่งกับงานนี้

คุณมีตัวเลือกในการจับภาพ:

• ส่วนที่มองเห็นได้ของหน้า (มีประโยชน์ที่จะไม่รวมองค์ประกอบของเบราว์เซอร์เมื่อเทียบกับalt+ Print Scrn)
• ส่วนของหน้า (ซึ่งคุณสามารถเลื่อนเมาส์ไปวางเหนือพื้นที่บนหน้าจอเพื่อค้นหาชิ้นส่วนที่คุณต้องการ - พื้นที่เหล่านี้สอดคล้องกับองค์ประกอบ HTML พื้นฐาน)
• พื้นที่ที่เลือก (คุณคลิกด้วยตนเองและลากตำแหน่งที่คุณต้องการจับภาพหน้าจอรองรับการเลื่อนขณะลาก)
• ทั้งหน้า

ตัวเลือกเพื่อให้พอดีกับทุกสิ่งในหน้าเดียว:

• ใช้<Ctrl>-เพื่อให้พอดีกับทุกสิ่งในหน้าเดียว
• หมุนหน้าจอของคุณเป็นโหมดแนวตั้ง
• ใช้หน้าจอที่สองในโหมดแนวตั้งและค้นหาด้านล่างหน้าจอแรก
• รวมทั้งหมดข้างต้น

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

ในการจับภาพหน้าจอคุณสามารถเพิ่มส่วนขยายได้เหมือนภาพหน้าจอที่ใช้งานง่าย จากนั้นจะง่ายขึ้นมากสำหรับคุณที่จะถ่ายภาพหน้าจอ

สำหรับโปรแกรมเดสก์ท็อปด้วยการเลื่อนหน้าต่างการ จับภาพ ApowerSoftก็ทำหน้าที่ให้ฉันได้