एक स्क्रीनशॉट कैसे लें जिसमें फ़ायरफ़ॉक्स में एक वेब पेज के भीतर स्क्रॉलिंग तत्व शामिल है?


70

मुझे पूरे वेबपेज का स्क्रीनशॉट लेने की आवश्यकता है। चाल यह है कि मुझे स्क्रीन में फिट नहीं होने वाले एकल तत्व की संपूर्ण सामग्री को शामिल करने के लिए स्क्रीनशॉट की आवश्यकता है।

यह एक एकल स्तंभ तालिका है जिसकी ऊंचाई के कारण स्क्रॉलबार है। यह एक IFRAME नहीं है (जो अपने टैब में लोड करना सरल होगा)।

कॉलम में स्वरूपित पाठ और कुछ छोटी छवियां हैं।

स्क्रॉल करने वाले लंबे वेब पेजों के लिए, यह कार्य करना तुच्छ है। लेकिन जब पृष्ठ स्क्रॉल किया जाता है, तो इसमें एक व्यक्तिगत तत्व शामिल होने पर इसे कैसे पूरा किया जा सकता है?

स्पष्ट होने के लिए, मुझे केवल तत्व ही नहीं, बल्कि पूरे पृष्ठ पर कब्जा करने की आवश्यकता है।

मैं विंडोज पर फ़ायरफ़ॉक्स का उपयोग करके इसे पूरा करना चाहूंगा।


2
कभी पृष्ठ को PDF के रूप में सहेजने पर विचार करें? इस विधि के साथ पकड़ कुछ वेबसाइटों में एक "प्रिंट दृश्य" होता है जो पीडीएफ में होता है, लेकिन कुछ मामलों में यह तकनीक काम कर सकती है।
जेकगोल्ड

@JakeGould धन्यवाद जेक। क्या वह पृष्ठ के भीतर स्क्रॉल और तत्व करने के लिए काम करेगा?
रॉकपैपर छिपकली

वेल्ड, स्क्रॉलिंग तत्व के बारे में हिस्सा याद किया। मेरे लिए यह कहना बहुत कठिन है कि मैं कह सकता हूं कि मुझे विश्वास नहीं हो रहा है कि पीडीएफ प्रिंटिंग विधि काम करेगी। यहां प्रस्तुत अन्य विचारों के साथ शुभकामनाएं।
जेकगोल्ड


अगर मैं सही तरीके से समझूं, तो सवाल में स्क्रॉलिंग तत्व को पूरी ऊंचाई से कम करने के लिए मजबूर किया जा रहा है। उस तत्व पर ऑटो के लिए ऊंचाई शैली विशेषता सेट करने से मदद मिल सकती है।
तेहलविस

जवाबों:


86

मेरा सुझाव फ़ायरफ़ॉक्स की निर्मित सुविधा का उपयोग करना है जो आपको एकल डोम तत्व के स्क्रीनशॉट लेने की अनुमति देता है।

बस डेवलपर टूल खोलें पॉप → तत्व ढूंढें → राइट क्लिक करें और स्क्रीनशॉट लें

यहाँ छवि विवरण दर्ज करें

यह मेरी आंतरिक साइट पर काम नहीं करता था इसलिए यह नहीं कह सकता कि यह सभी के लिए काम करेगा।

ओपी के संपादन के बाद अपडेट करें:

यदि आप नीचे दिखाए गए अनुसार पूरे DOM तत्व सामग्री के साथ पूरा पृष्ठ रिकॉर्ड करने का इरादा रखते हैं, तो आपको DOM तत्व की ऊंचाई को संपादित करना चाहिए लेकिन ...

यहाँ छवि विवरण दर्ज करें

यह व्यूपोर्ट और स्क्रीनशॉट के बाहर बहुत सारे डोम तत्वों को धकेलने वाला है या AFAIK किसी भी अन्य टूल को कैप्चर नहीं करेगा, जो आपके उद्देश्य को सोचता है।

नीचे पढ़ें https://en.wikipedia.org/wiki/Screenshot से

एक स्क्रीनशॉट, स्क्रीन कैप्चर, स्क्रीन कैप, कैप, स्क्रीन डंप, या स्क्रेंग्रेब एक व्यक्ति द्वारा मॉनिटर, टेलीविज़न या उपयोग में अन्य विज़ुअल आउटपुट डिवाइस पर दिखाई देने वाली वस्तुओं को रिकॉर्ड करने के लिए लिया गया चित्र है।

अगर मुझे वास्तव में इसे अपने तरीके से करना है, तो मैं या तो जीआईएफ बनाऊंगा या दो स्क्रीनशॉट ले लूंगा एक पूर्ण पृष्ठ और अन्य केवल DOM तत्व को एक में विलय करने के लिए।


आपके उत्तर के लिए बहुत बहुत धन्यवाद (और महान छवि!), लेकिन दुर्भाग्य से यह सवाल का जवाब नहीं देता है। मुझे केवल तत्व ही नहीं, तत्व सहित पूरे पृष्ठ का स्क्रीनशॉट लेने की आवश्यकता है।
रॉकपैपर छिपकली

5
@RockPaperLizard वास्तव में @ सज़ा का जवाब आपके प्रश्न का उत्तर देता है ... उसने इसे आपके उपयोग के मामले में लागू नहीं किया। आप उसके उत्तर का अनुसरण कर सकते हैं लेकिन <body>तत्व का चयन कर सकते हैं और यह आपको वांछित स्क्रीनशॉट देगा।
डिजिटल क्रिस

2
यदि आप DOM तत्व की ऊँचाई को संपादित करते हैं तो कोई आंतरिक स्क्रॉलबार नहीं हैं तो पूरे पृष्ठ पर कब्जा करने के लिए FireShot का उपयोग करें, यह काम करना चाहिए।

मैं इस तरह से एक स्क्रीनशॉट प्राप्त करने में सक्षम था, लेकिन अब और नहीं। यह अभी भी कैमरा शटर ध्वनि पैदा करता है, बस क्लिपबोर्ड में कुछ भी नहीं डालता है। डेवलपर टूलबार में समान कमांड के लिए जाता है, कोई फ़ाइल नहीं बनाई जाती है।
MrFox

@MrFox डाउनलोड फ़ोल्डर में एक पीएनजी फ़ाइल बनाई गई है।
AxiomaticNexus

24

आप डेवलपर टूलबार से स्क्रीनशॉट कमांड का उपयोग कर सकते हैं:

  1. प्रेस Shift+ F2उपकरण पट्टी खोलने के लिए या वेब डेवलपर उपकरण मेनू से यह चयन करने के लिए।

  2. टूलबार में, कमांड टाइप करें screenshot --fullpage fullpage.png

किसी एक तत्व को पकड़ने के लिए आप उसके css चयनकर्ता का उपयोग कर सकते हैं - theselector ध्वज उदा

screenshot --selector #hot-network-questions

नीचे आपको इमेज मिलेगी

यहाँ छवि विवरण दर्ज करें


4
@RockPaperLizard ने उसी जवाब के साथ एक और पोस्ट पाया और ओपी को आपके द्वारा संपादित किया गया था।
यमक

@pun धन्यवाद। लेकिन मुझे केवल तत्व ही नहीं, बल्कि विस्तारित तत्व के साथ पूरे पृष्ठ का स्क्रीनशॉट लेने की आवश्यकता है।
रॉकपैपर छिपकली

मैं इस तरह से एक स्क्रीनशॉट प्राप्त करने में सक्षम था, लेकिन अब और नहीं। यह अभी भी कैमरा शटर ध्वनि पैदा करता है, न कि केवल फ़ाइल। उसी तरह से डेवलपर मोड में तत्व को राइट-क्लिक करने और इसे उस तरह से कॉपी करने के लिए जाता है। क्लिपबोर्ड पर कोई छवि नहीं भेजी जाती है।
MrFox

8

फ़ायरफ़ॉक्स के उत्तरदायी डिज़ाइन मोड का उपयोग करें , चौड़ाई को कुछ सामान्य और ऊंचाई सेट करें जैसे कि यह पूरे पृष्ठ को सम्मिलित करने के लिए पर्याप्त है, स्क्रीनशॉट बटन (कैमरा आइकन) पर क्लिक करें।


4

Snagit नाम का सॉफ्टवेयर है जो आपकी समस्या को हल कर सकता है। यह सॉफ्टवेयर स्क्रीन शॉट को विभिन्न प्रकारों में ले जा सकता है, जैसे एक स्क्रॉलिंग विंडो और वीडियो रिकॉर्ड भी कर सकता है।

यह एक भुगतान किया गया आवेदन है, लेकिन इसके लिए एक परीक्षण भी उपलब्ध है।


यदि आप इसे उत्तर के रूप में पाते हैं और इसे टिप्पणी में पोस्ट करते हैं तो इसका क्या मतलब है?
AL


मैंने वर्षों से SnagIt का उपयोग किया है। यह एक बहुत ही उपयोगी सॉफ्टवेयर है।
रॉय टिंकर

2

मैं स्क्रीनप्रेसो का उपयोग करता हूं । यह आपको एक स्क्रॉलिंग स्क्रीनशॉट लेने की अनुमति देता है। मूल रूप से आप एक स्क्रीनशॉट लेते हैं, नीचे स्क्रॉल करते हैं और दूसरा और इतने पर लेते हैं, फिर स्क्रीनप्रेसो उन्हें एक साथ सिलाई करता है। स्क्रीनप्रेसो भी मुफ्त है।

FYI करें, स्क्रीनशॉट स्क्रॉल करने के लिए शॉर्टकट कीज़ WindowsKey + Shift + PrintScreen है। फिर आपको उस विंडो पर क्लिक करना होगा जिसे आप स्क्रॉल करना चाहते हैं। जब आप स्क्रीनशॉट के अगले भाग पर पहुँचते हैं, तो राइट क्लिक करें, नीचे स्क्रॉल करें, राइट क्लिक करें और इसी तरह। Whe आप समाप्त हो गए हैं, बाएं क्लिक करें और वे एक साथ सिले जाएंगे। प्रत्येक स्क्रीनशॉट पर कुछ ओवरलैप प्राप्त करना सुनिश्चित करें ताकि सिलाई प्रक्रिया बेहतर काम करे।


1

निंबस स्क्रीन कैप्चर नामक एक एक्सटेंशन है जो इस कार्य के लिए पूरी तरह से अनुकूल है।

आपके पास कब्जा करने का विकल्प है:

  • पृष्ठ का दृश्य भाग ( alt+ के विपरीत ब्राउज़र तत्वों को शामिल नहीं करने के लिए उपयोगी Print Scrn)
  • पृष्ठ का एक टुकड़ा (जिससे आप स्क्रीन पर उन क्षेत्रों पर मंडरा सकते हैं, जहाँ आप चाहते हैं कि इन टुकड़ों को खोजने के लिए - ये क्षेत्र उनके अंतर्निहित HTML तत्वों के अनुरूप हैं)
  • चयनित क्षेत्र (आप मैन्युअल रूप से क्लिक करें और खींचें जहाँ आप स्क्रीनशॉट चाहते हैं, खींचते समय स्क्रॉल का समर्थन करता है)
  • पूरा पृष्ठ

चमक


आपके उत्तर के लिए धन्यवाद, मैं इसकी सराहना करता हूं। दुर्भाग्य से, ऐसा नहीं लगता है कि निंबस स्क्रीन कैप्चर पृष्ठ के भीतर स्क्रॉलिंग तत्व की संपूर्ण सामग्री को कैप्चर कर सकता है । अगर मैं गलत हूं, तो क्या आप उस टूल के साथ इसे पूरा करने के बारे में अधिक विस्तार प्रदान कर सकते हैं?
रॉकपैपर छिपकली

@RockPaperLizard आप सही हैं, यह इसका समर्थन नहीं करता है - मैंने सोचा था कि टुकड़ा मोड स्क्रॉलिंग तत्वों को कवर करेगा, या चयनित क्षेत्र मोड काम करेगा लेकिन, जबकि खिड़की इस मोड में स्क्रॉल की जा सकती है, ऐसा लगता है कि स्क्रॉलिंग तत्व नहीं कर सकते।
कीथ हॉल

पुष्टि करने के लिए धन्यवाद, मैं अभी इसे नहीं देख रहा था। शायद वे उस कार्यक्षमता को भविष्य के संस्करण में जोड़ देंगे।
रॉकपैपर छिपकली

0

एक पृष्ठ पर सब कुछ फिट करने के विकल्प:

  • <Ctrl>-एक पृष्ठ पर सब कुछ फिट करने के लिए उपयोग करें
  • अपनी स्क्रीन को पोर्ट्रेट मोड में घुमाएं
  • पोर्ट्रेट मोड में दूसरी स्क्रीन का उपयोग करें और इसे पहले वाले से नीचे खोजें
  • उपरोक्त सभी को मिलाएं

एक और विकल्प यह है कि आप जो कैप्चर करना चाहते हैं उसके ऊपरी हिस्से का स्क्रीन शॉट लें। नीचे स्क्रॉल करें, अगला स्क्रीन शूट लें। इसे तब तक दोहराएं जब तक आप सब कुछ कब्जा नहीं कर लेते।
वैकल्पिक रूप से: एक छवि संपादक (जैसे जिम्प) का उपयोग करके स्क्रीन शॉट्स को एक बड़ी छवि में संयोजित करें।


1
जब तक मुझे आइटम # 4 नहीं मिला, मुझे लगा कि आप केवल सभी वस्तुओं को संयोजित करने का सुझाव दे रहे हैं! मैं 20 स्क्रीन होने की कल्पना कर रहा था और उन्हें एक के ऊपर एक कर रहा था ... LOL। तब मुझे # 4 मिला, और सीखा कि आपका मतलब व्यक्तिगत रूप से या संयुक्त होने वाली वस्तुओं से है ।
रॉकपैपर छिपकली

लेकिन अगर आप पृष्ठ को ज़ूम आउट करते हैं, तो विरूपण के बिना इसे वापस स्केल करने का कोई तरीका नहीं है।
NiCk न्यूमैन

0

स्क्रीनशॉट लेने के लिए आप आसान स्क्रीनशॉट की तरह एक एक्सटेंशन जोड़ सकते हैं। तब आपके लिए स्क्रीन शॉट्स लेना बहुत आसान हो जाएगा।


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.