ทดลองใช้ฟรี
← กลับไปที่บล็อก

การแคปหน้าเว็บทั้งหน้ามีสามกับดัก: โหลดแบบขี้เกียจ แถบนำทางติดหนึบ และหน้าที่เลื่อนไม่สิ้นสุด

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

แคปทั้งหน้าได้ทั้งหน้าเว็บ แคปปกติได้แค่หนึ่งจอ

ตัวกำหนดความครบถ้วนของภาพยาวคือมุมมอง: หน้าต่างที่เบราว์เซอร์ใช้แสดงหน้าเว็บ และการแคปทั้งหน้าต้องข้ามมันไปเอาเนื้อหาแนวตั้งทั้งหมด กด Print Screen หรือใช้เครื่องมือแคปของระบบ คุณได้แค่สิ่งที่มุมมองแสดง หน้าสินค้าเลื่อนลงไปเจ็ดแปดจอได้สบาย แคปทีละจอแล้วต่อเองทั้งเหนื่อยและเสี่ยงเหลื่อม อยากได้ครบในครั้งเดียว ต้องให้เครื่องมือเลื่อนถึงล่างสุดแล้วต่อให้ Chrome DevTools มีคำสั่งทางการ Capture full size screenshot และเอกสารระบุว่ามันแคปได้ถึง "เนื้อหาที่มองไม่เห็นในมุมมอง" เครื่องมือแคปทั้งหน้าของ VidBrowser ใช้แนวคิดเดียวกัน เปลี่ยนจากคำสั่งบรรทัดเป็นช่องกรอก URL เดียว

สามจุดที่ภาพยาวพังบ่อย: ช่องว่างเปล่า แถบนำทางซ้ำ และหน้าที่ไม่มีจุดจบ

ภาพยาวที่ไม่ครบแทบทุกใบย้อนกลับมาที่สามสาเหตุนี้ ทุกข์ล้วนมาจากโครงสร้างของหน้าเว็บเอง รู้จักแล้วจะไม่เข้าใจผิดว่าเครื่องมือพัง:

- ช่องว่างเปล่า: หลายหน้าใช้ lazy load รูปจะถูกขอเมื่อสกอลไปถึงใกล้ ๆ เครื่องมือกวาดจากบนลงล่าง ส่วนที่ไม่เคยถูกกระตุ้นจะว่างเปล่า

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

- หน้าที่ไม่มีจุดจบ: ฟีดแบบเลื่อนไม่สิ้นสุดไม่มีก้น เครื่องมือไม่รู้ว่าควรหยุดตรงไหน หน้าที่ยาวมากยังชนขีดจำกัดความสูงของภาพ หน่วยความจำ และรูปแบบไฟล์ออก

สามกับดักของภาพยาว

มุมมองของอุปกรณ์กำหนดหน้าตาภาพยาว: เดสก์ท็อป แท็บเล็ต และมือถือ

URL เดิม เปลี่ยนมุมมองอุปกรณ์ ได้ภาพคนละใบ หน้าเว็บสลับเลย์เอาต์ตอบสนองตามความกว้างมุมมอง: เดสก์ท็อปให้หลายคอลัมน์กว้าง มือถือให้คอลัมน์เดียวแคบยาว อยากเก็บหน้าเว็บตามที่ผู้ใช้คอมเห็น เลือกเดสก์ท็อป อยากเห็นแบบที่คนมือถือเห็น เลือกโปรไฟล์มือถือ นี่คือทางเลือกเลย์เอาต์ ไม่ใช่คุณภาพ - ตัดสินใจก่อนแคป

สี่ขั้นตอนเซฟทั้งหน้าเว็บเป็นภาพยาวหนึ่งใบ

ทางเข้าอยู่ในกล่องเครื่องมือของ VidBrowser รวมสี่ขั้นตอน:

ขั้นตอนที่ 1: ดาวน์โหลดและติดตั้ง VidBrowser

ทางเข้าติดตั้งอยู่ที่ หน้าตัวดาวน์โหลดวิดีโอ VidBrowser เป็นเบราว์เซอร์วิดีโอบนเดสก์ท็อปสำหรับ Windows และ Mac ดูวิดีโอ ตัดคลิป และเซฟลงเครื่องได้ มีทั้งดาวน์โหลดและบันทึกในตัว

ดาวน์โหลดและติดตั้ง VidBrowser

ขั้นตอนที่ 2: เปิดเครื่องมือแคปทั้งหน้า

เข้าเมนูเครื่องมือด้านซ้าย หาทางเข้าแคปทั้งหน้า หรือเข้าตรงที่ หน้าเครื่องมือแคปทั้งหน้า

เครื่องมือแคปทั้งหน้า

ขั้นตอนที่ 3: ใส่ URL และเลือกการตั้งค่า

วางที่อยู่หน้าเว็บสาธารณะที่คุณมีสิทธิ์แคป เลือกมุมมองอุปกรณ์ (เดสก์ท็อป แท็บเล็ต มือถือ) ขอบเขต (ทั้งหน้าหรือเฉพาะที่มองเห็น) และรูปแบบไฟล์ (PNG, JPG, WebP)

ตั้งค่าการแคปทั้งหน้า

ขั้นตอนที่ 4: สร้างและดาวน์โหลด

ตรวจผลลัพธ์แล้วดาวน์โหลดเซฟลงอุปกรณ์ เครื่องมือนี้มุ่งหน้าเว็บสาธารณะ: ไม่อ่านคุกกี้ล็อกอินของเบราว์เซอร์คุณ และไม่ลัดผ่านการล็อกอิน ระบบจ่ายเงิน หรือข้อจำกัดการเข้าถึง

สามประเภทที่ควรแคปเป็นภาพยาว: บทสนทนา หน้าสินค้า และภาพโปรไฟล์

คุณค่าจริงของภาพยาวคือตะปูหน้าที่เปลี่ยนหรือหายไปติดไว้เป็นเวอร์ชันที่ไม่เปลี่ยน สามสถานการณ์ที่เจอบ่อยสุด:

- บทสนทนาซัพพอร์ตและการยืนยันคำสั่งซื้อ: หน้าแชทมักไม่มีปุ่มดาวน์โหลด ภาพยาวเก็บบทสนทนาเต็มตามลำดับเวลา - เป็นหลักฐานชัดกว่าภาพเดี่ยวกระจัดกระจายมาก

- หน้าสินค้าไว้เทียบราคาและเก็บถาวร: ราคา สเปก สต็อกเปลี่ยนตลอด ภาพยาวเก็บทั้งเลย์เอาต์พร้อมตัวเลข คราวหน้าเทียบมีหลักอ้าง

- ภาพโปรไฟล์และหน้าแรก: โปรไฟล์โซเชียลอัปเดตและถูกลบ แคปเป็นระยะแล้วการเปลี่ยนแปลงเห็นชัด ภาพทั้งหน้ายังเป็นวัสดุสำเร็จรูปไว้ใช้อ้างอิงงานออกแบบเว็บ

เซฟและจัดการภาพยาว: รูปแบบ ขนาด และเส้นทางอีกทาง

ภาพยาวธรรมชาติยาวและหนัก ทำสองเรื่องหลังเซฟปุ๊บ ภายหลังสบายขึ้น เรื่องรูปแบบ: PNG ไม่สูญเสียคุณภาพ เหมาะกับตัวอักษรและรายละเอียดหน้าจอ, JPG เล็กกว่า เหมาะกับหน้าที่รูปเยอะ, WebP เล็กกว่าอีกแต่ซอฟต์แวร์เก่าอาจเปิดไม่ได้ - ถ้าเปิดไม่ได้ แปลงครั้งเดียวตามบทความ แปลง WebP เป็น JPG เรื่องขนาด: หน้าที่ยาวมากแคปออกมาเริ่มต้นหลาย MB ถ้าแนบไฟล์แล้วถูกปฏิเสธ บีบอัดก่อน - บทความ บีบอัดรูปมีแผนจัดการระหว่างคุณภาพกับขนาดครบ และถ้าสิ่งที่อยากได้จากหน้านั้นคือชุดรูป ไม่ใช่เลย์เอาต์ทั้งหน้า แทนที่จะแคปภาพยาวยักษ์หนึ่งใบ ใช้ ดาวน์โหลดรูปแบบกลุ่มเอาไฟล์ต้นฉบับตรง ๆ ดีกว่า - ภาพยาวเก็บภาพรวม ดาวน์โหลดกลุ่มได้ต้นฉบับ สองทางแยกหน้าที่กันชัด

สรุป

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

คำถามที่พบบ่อย

ช่องว่างเปล่าในภาพยาวเอามาเติมได้ไหม?

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

หน้าที่ต้องล็อกอินก่อนถึงดูได้ แคปได้ไหม?

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

ทำไมแถบนำทางโผล่หลายครั้งในภาพยาวของฉัน?

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

บล็อกเพิ่มเติม