ถ่ายภาพเต็มหน้าจอด้วย Firefox บนบรรทัดคำสั่ง


224

ฉันใช้ Firefox บน Xvfb ใน VPS สิ่งที่ฉันต้องการจะทำคือการจับภาพหน้าจอเต็มหน้าของหน้า

ฉันสามารถเปลี่ยนเส้นทาง Firefox ไปยังหน้าใดหน้าหนึ่งโดยใช้

firefox http://google.com

และถ่ายภาพหน้าจอ (ใน X) โดยใช้ ImageMagick

import root -window output.jpg

ปัญหาคือหน้าส่วนใหญ่ต้องเลื่อนและฉันไม่ทราบความสูงล่วงหน้า

อีกวิธีคือเลือกความสูงที่ใหญ่มาก (เช่น 4000px) แล้วประมวลผลภาพและลบส่วนที่ไร้ประโยชน์ออก แต่นั่นเป็นการประมวลผลที่ไม่จำเป็น

ฉันพบส่วนเสริมของ Firefox หลายตัว แต่ฉันกำลังมองหาโซลูชันที่สามารถตั้งโปรแกรมได้โดยใช้บรรทัดคำสั่ง Shell

แก้ไข: ฉันสิ้นสุดการเขียนส่วนขยาย FireFoxของฉันเองสำหรับการทำเช่นนี้


1
ฉันเห็นเครื่องมือ webkit cli สำหรับถ่ายรูปหน้าจอ แต่ฉันจำชื่อไม่ได้
Rufo El Magufo

คำตอบ:


480

Developer Toolbar GCLI และShift+ F2ทางลัดที่ถูกถอดออกใน Firefox รุ่น 60 วิธีถ่ายภาพหน้าจอ 60 หรือใหม่กว่า:

  • กดCtrl+ Shift+ Kเพื่อเปิดคอนโซลผู้พัฒนา ( ⌥ Option+ ⌘ Command+ Kบน macOS)
  • ประเภท:screenshotหรือ:screenshot --fullpage

ค้นหาเพิ่มเติมเกี่ยวกับภาพหน้าจอและคุณสมบัติอื่น ๆ


สำหรับ Firefox เวอร์ชั่น <60:

กดShift+ F2หรือไปที่เครื่องมือ> นักพัฒนาเว็บ> แถบเครื่องมือนักพัฒนาซอฟต์แวร์เพื่อเปิดบรรทัดคำสั่ง เขียน:

screenshot

และกดEnterเพื่อถ่ายภาพหน้าจอ

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

screenshot --fullpage

และหากต้องการคัดลอกภาพหน้าจอไปยังคลิปบอร์ดให้ใช้--clipboardตัวเลือก:

screenshot --clipboard --fullpage

Firefox 18เปลี่ยนวิธีการส่งผ่านข้อโต้แย้งไปยังคำสั่งคุณต้องเพิ่ม "-" ก่อนหน้าพวกเขา

คุณสามารถค้นหาเอกสารบางรายการเต็มรูปแบบของคำสั่งที่นี่

PS ภาพหน้าจอจะถูกบันทึกลงในไดเรกทอรีดาวน์โหลดตามค่าเริ่มต้น


4
หากคุณต้องการเพียงแค่คัดลอกภาพหน้าจอไปยังคลิปบอร์ดของคุณโดยตรงใช้ screenshot --clipboard --fullpage
mbokil

2
คำสั่งนั้นใช้ไม่ได้ในคอนโซล javascript ดังนั้นจะมีลิงค์ไปยังข้อมูลเพิ่มเติมเกี่ยวกับแถบเครื่องมือนี้หรือไม่? มันทำอะไรได้อีก?
tremby

5
เพียง FYI คุณยังสามารถเลือกบันทึก DOM ผ่านการตรวจสอบแล้ว->right-click screenshot nodeสิ่งนี้มีประโยชน์มากเมื่อคุณต้องการจับภาพส่วนของหน้า
Tom

5
ภาพหน้าจอแบบเต็มหน้าสู่คลิปบอร์ด - screenshot --clipboard --fullpageภาพหน้าจอของโหนดเฉพาะ (ตามรหัส) -screenshot --clipboard --selector #elementId
Mohnish

3
ฉันต้องใช้:screenshot --clipboard --fullpage(นึกถึงลำไส้ใหญ่)
คนที่

134

อัปเดต 2018-07-23

ตามที่ได้ชี้ให้เห็นในความคิดเห็นคำถามนี้เกี่ยวกับการรับภาพหน้าจอจากบรรทัดคำสั่งจากบรรทัดคำสั่งขอโทษฉันเพิ่งอ่านไป ดังนั้นนี่คือคำตอบที่ถูกต้อง:

ในฐานะของ Firefox 57 คุณสามารถสร้างภาพหน้าจอในโหมดหัวขาดเช่นนี้:

firefox -screenshot https://developer.mozilla.com

อ่านเพิ่มเติมในเอกสาร

อัปเดต 2017-06-25

ในฐานะของ Firefox 55 มีภาพหน้าจอของ Firefoxเป็นทางเลือกที่ยืดหยุ่นมากขึ้น ในฐานะของหน้าจอ Firefox 57 สามารถจับภาพเต็มหน้าได้เช่นกัน

คำตอบเดิม

ตั้งแต่ Firefox 32 ยังมีปุ่มสกรีนช็อตเต็มหน้าในเครื่องมือสำหรับนักพัฒนา (F12) หากไม่ได้เปิดใช้งานให้ไปที่การตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (ปุ่มเกียร์) แล้วเลือก "จับภาพหน้าจอเต็มหน้า" ที่ส่วน "ปุ่มกล่องเครื่องมือที่มีอยู่"

แถบเครื่องมือเครื่องมือสำหรับนักพัฒนา แหล่งที่มา: developer.mozilla.org

ภาพหน้าจอจะถูกบันทึกในไดเรกทอรีดาวน์โหลด สิ่งนี้ทำงานคล้ายกับscreenshot --fullpageในแถบเครื่องมือ


7
สำหรับผู้ที่มีการเปิด Firebug ใน F12 เครื่องมือสำหรับนักพัฒนาสามารถใช้ได้กับ Ctrl + Shift + K หรือ Ctrl + Shift + I แค่ ... ในกรณีที่ ... มีคนไม่เคยใช้มาก่อน
Kir Kanos

แป้นพิมพ์ลัดเหล่านั้นใช้ไม่ได้บน Mac ใช้เครื่องมือ> นักพัฒนาเว็บ> เครื่องมือสลับ และใช่ปุ่มหน้าจอถูกปิดใช้งานโดยค่าเริ่มต้น คลิกที่ไอคอนการตั้งค่าเพื่อเปิดใช้งาน
Snowcrash

สำหรับ Mac คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ด้วยcmd+ alt+i
achairapart

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

1
จากคำถาม: "ฉันพบส่วนเสริมของ Firefox หลายตัว แต่ฉันกำลังมองหาโซลูชันที่สามารถตั้งโปรแกรมได้โดยใช้บรรทัดคำสั่ง Shell"
เควนติน

9

ฉันสิ้นสุดการเข้ารหัสโซลูชันที่กำหนดเอง (ส่วนขยาย Firefox) ที่ทำเช่นนี้ ฉันคิดว่าตามเวลาที่ฉันพัฒนามัน commandline ที่กล่าวถึงใน enreas ไม่ได้อยู่ที่นั่น

ส่วนขยายของ Firefox คือCmdShots CmdShotsเป็นตัวเลือกที่ดีถ้าคุณต้องการควบคุมกระบวนการถ่ายภาพหน้าจอให้ดีขึ้น (หรือคุณต้องการทำการแก้ไข HTML / JS และการประมวลผลภาพ)

คุณสามารถใช้มันและใช้ในทางที่ผิด ฉันตัดสินใจที่จะเก็บมันไว้โดยไม่มีใบอนุญาตดังนั้นคุณมีอิสระที่จะเล่นกับมันตามที่คุณต้องการ


20
อืมนั่นไม่ใช่สิ่งที่ "ไม่มีใบอนุญาต" หมายความว่าจริง ๆ แล้วหมายความว่าคุณไม่ได้รับอนุญาตสำหรับการใช้งานใด ๆ ซึ่งเห็นได้ชัดว่าไม่เป็นความจริงเพราะในประโยคที่คุณพูดว่าคุณไม่ได้ใช้ ต้องการ. บางทีคุณอาจต้องการบางสิ่งเช่นCC0 ?
SamB

สำหรับสิ่งที่ "ไม่มีใบอนุญาต" ฉันชอบสิ่งนี้: wtfpl.netระบุไว้อย่างชัดเจนว่าสิ่งใดที่ได้รับอนุญาตหากไม่มี BS ตามกฎหมาย
kap

@ SamB ฉันสะดุดความคิดเห็นของคุณแบบสุ่ม ใช่ฉันรู้ 3 ปีต่อมา ปัญหาคือว่าถ้าฉันเขียนใบอนุญาตฉันมีสิ่งที่ซับซ้อนอยู่แล้ว วิธีการ NOLICENSE คือการทำสิ่งต่างๆ
Omar Abid

3
โปรดผู้ใช้อย่าใช้สิทธิ์ใช้งานที่กำหนดเอง ฉันรู้ว่าผู้คนพยายามหลีกเลี่ยงเรื่องไร้สาระทางกฎหมายโดยการเขียนใบอนุญาตของตัวเอง แต่พวกเขาลงเอยทำสิ่งที่ตรงกันข้ามทำให้เกิดอาการปวดหัวทางกฎหมายสำหรับคนที่พวกเขาพยายามหาว่าใบอนุญาตที่กำหนดเองจริงหมายถึงอะไร ดู selectalicense.com
Flimm

@SamB - แม้ว่า "ไม่มีใบอนุญาต" จะไม่เป็น "ใบอนุญาตอย่างเป็นทางการ" แต่ "The Unlicense" เป็นสิทธิ์ใช้งานและดูเหมือนจะใกล้เคียงกับที่ OP อธิบายไว้ว่าเป็นเจตนาของเขาในการใช้รหัสของเขา ดู: selectalicense.com/licenses/unlicense
Will Ediger

8

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

หลังจากติดตั้งส่วนขยายคุณเพียงแค่ต้องพิมพ์คำสั่ง:

firefox -print http://google.com -printfile ~/foo.png

1

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

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


(ที่มา: mozilla.net )


3
จากคำถาม: "ฉันพบส่วนเสริมของ Firefox หลายตัว แต่ฉันกำลังมองหาโซลูชันที่สามารถตั้งโปรแกรมได้โดยใช้บรรทัดคำสั่ง Shell"
เควนติน

-1

คุณสามารถใช้ซีลีเนียมและเครื่องมือสร้างเว็บสำหรับ Firefox

import selenium.webdriver
import selenium.common

options = selenium.webdriver.firefox.options.Options()
# options.headless = True
with selenium.webdriver.Firefox(options=options) as driver:
    driver.get('http://google.com')
    time.sleep(2)
    root=driver.find_element_by_tag_name('html')
    root.screenshot('whole page screenshot.png')
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.