javascript ब्राउज़र सामग्री(वेबसाइट) का स्क्रीनशॉट कैप्चर करें




google-chrome image-processing (6)

अधिकांश सर्वर-साइड भाषाएं केवल HTML की सेवा करती हैं और इसे कभी प्रस्तुत नहीं करती हैं। थोड़ी देर पहले मैं एकल पृष्ठ जावास्क्रिप्ट अनुप्रयोगों को अनुक्रमणित करने के मुद्दे में भाग गया और समाधानों में से एक phantomJS था।

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

यह सभी सबसे लोकप्रिय ब्राउज़रों (आईई को छोड़कर) को कवर करेगा। यह अभी भी एक हेडलेस समाधान है, लेकिन आप विभिन्न लेआउट इंजन देख पाएंगे। आपको नोडजेएस की आवश्यकता होगी और यह थोड़ा सीखना हो सकता है, लेकिन दोनों स्क्रीनशॉट पर दस्तावेज हैं। सौभाग्य!

मेरा लक्ष्य वेबसाइट की एक छवि है (हां, उतना ही सरल)। मुझे पता है कि html2canvas जैसे html2canvas । हालांकि मैं नहीं चाहता कि क्लाइंट ब्राउज़र स्क्रीनशॉट प्रस्तुत करे।

एक कारण यह है कि मैं एक webview साथ क्रोम एक्सटेंशन का उपयोग करता हूं जो अनिवार्य रूप से एक webview तरह व्यवहार करता है। iFrame युक्त वेबसाइट के लिए स्क्रीनशॉट प्रस्तुत करने के सुरक्षा कारणों से काम नहीं करता है।

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

अब मैं क्या कर रहा हूं:

  1. कमांड लाइन के माध्यम से ब्राउज़र खोलें
  2. कमांड लाइन के माध्यम से ब्राउज़र विंडो पर फोकस स्विच करें
  3. कमांड लाइन के माध्यम से स्क्रीनशॉट (मैक पर स्क्रीनकैप्चर, लिनक्स पर स्क्रॉट) बनाएं

इस मूल स्तर पर इसे करने से छवि की हानि होती है जिसमें स्टेटस बार, ब्राउज़र प्लगइन सामान इत्यादि शामिल हैं। असल में मैं केवल इस वेबसाइट -एप्लिकेशन के बिना वास्तविक वेबसाइट सामग्री चाहता हूं।

  • सबसे खराब समाधान प्रत्येक ब्राउजर के लिए विंडो के सापेक्ष सामग्री की 0 | 0 स्थिति को हार्ड कोड करना होगा। यह शर्मीली है (स्पष्ट कारणों से)।
  • एक और समाधान जिसके साथ मैं आया हूं: ब्राउज़र को बताएं (मैं सॉकेट के माध्यम से एक प्लगइन से बात कर सकता हूं) x: 0; y: 0; पर एक क्यूआर-कोड जैसे कुछ जोड़ने के लिए, छवि प्रसंस्करण सर्वर पर स्क्रीनशॉट भेजें। उसके बाद क्यूआर-कोड हटा दें और फिर स्क्रीनशॉट भेजें। तब मैं 0 0 0 के सापेक्ष हर बिंदु जानता हूं लेकिन यह भी सुरुचिपूर्ण नहीं है।

सबसे अच्छी बात एक कमांड लाइन उपकरण होगी जो किसी भी तरह से मुझे यह निर्धारित करने देता है कि किसी एप्लिकेशन का एक हिस्सा मैं किस छवि को कैप्चर करना चाहता हूं।

फ़ायरफ़ॉक्स या इस सर्वर-साइड टूल या इन सभी टूल्स के लिए यह प्लगइन एक उदाहरण है जो विभिन्न ब्राउज़रों और ओएस के साथ वेबसाइटों के स्क्रीनशॉट प्रदान करता है। मुझे आश्चर्य है कि वे ब्राउज़र-विशिष्ट जीयूआई तत्वों से कैसे छुटकारा पा रहे हैं।

अतिरिक्तता :

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


Awesomescreenshot वास्तव में वास्तविक स्क्रीनशॉट लेने वाले पृष्ठ को स्क्रॉल करेगा, फिर उन छवियों को आपके लिए एक लंबी छवि में एक साथ रख दें। आप इसे केवल उस पृष्ठ के हिस्से को कैप्चर करने के लिए सेट कर सकते हैं जो दिखा रहा है, या एक चयनित अनुभाग।

आप इसे मैक्रो टाइप प्रोग्राम / स्क्रिप्टिंग भाषा जैसे ऑटो हॉट कीज़ के साथ मिश्रित कर सकते हैं। कमांड लाइन का उपयोग करने से आप इसे आसान या नहीं पा सकते हैं। मुझे लगता है कि यह उस पर निर्भर करता है जो आप करने की कोशिश कर रहे हैं।


XULRunner साथ अतीत में मुझे कुछ भाग्य मिला है

आप यहां उल्लिखित दिनचर्या का प्रयास कर सकते हैं: https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/

जो मूल रूप से फ़ायरफ़ॉक्स का एक खोल चलाता है और स्क्रीनशॉट हथियाने की प्रक्रिया को स्वचालित करता है। इसे कुछ tweaking की आवश्यकता हो सकती है, लेकिन मुझे लगता है कि यह लिखित के रूप में आपकी आवश्यकताओं को पूरा कर सकता है।


ऐसा करने के 2 तरीके हैं:

  1. फ़ायरफ़ॉक्स या क्रोम के लिए एक प्लगइन बनाएँ

स्क्रीनशॉट पृष्ठ पर कैनवास ओवरले बनाकर लिया जाता है। छवि दस्तावेज़ से ली गई है, इसलिए ब्राउज़र यूआई छवि का हिस्सा नहीं है।

  1. एक ब्राउज़र फिर से बनाएं (फैंटॉमजेएस, ट्राइफलेजेएस)

पहले स्थान पर कोई ब्राउज़र यूआई नहीं है।


ब्राउज़र, संस्करण और ओएस मंच के कई संयोजन

विशिष्ट ब्राउज़र और संस्करण के साथ वेबपृष्ठों के स्क्रीनशॉट को कैप्चर करने के लिए एक ऐसे ढांचे की आवश्यकता होती है जो इन सभी ब्राउज़रों में लॉन्च, रन और कैप्चर कर सके, आगे सवाल यह निर्दिष्ट नहीं किया गया है कि क्या यह निर्दिष्ट प्लेटफ़ॉर्म के लिए आवश्यक ब्राउज़र और संस्करणों के साथ संयोजन में आवश्यक है, जैसे कि ओएसएक्स, विंडोज, लिनक्स, एंड्रॉइड इत्यादि। इन प्लेटफॉर्म के विभिन्न संस्करण संभावित संयोजनों को आगे बढ़ाएंगे।

  • आपको इन ब्राउज़रों को बनाए रखने, सेटअप करने की आवश्यकता होगी
  • उन्हें चलाने के लिए एक ढांचा ढूंढें या बनाएं, सेलेनियम शायद आपकी सबसे अच्छी शर्त है
  • कुछ ब्राउज़र / ओएस संयोजनों के लिए सेलेनियम में समर्थन की कमी को खत्म करें
  • एक बुनियादी ढांचा जो इसका प्रबंधन करता है और उपयोग के लिए एक अच्छा एपीआई के रूप में उजागर करता है

हालांकि मौजूदा समाधान, या इसके लिए संबंधित समाधान हैं, उदाहरण के लिए:

विशिष्ट ब्राउज़र, संस्करण, मंच आदि में स्क्रीनशॉट कैप्चर करने के लिए।

this निःशुल्क है और ब्राउज़र combos का एक बड़ा सेट है, यदि आप इसे प्रोग्रामेटिक रूप से एक्सेस कर सकते हैं तो बहुत स्पष्ट नहीं है।

यह बस कॉलिंग और मौजूदा एपीआई किया

crossbrowsertesting.com एक वाणिज्यिक सेवा (नि: शुल्क परीक्षण) है जो सभी आवश्यकताओं को पूरा करने के लिए प्रतीत होता है।

क्या तकनीक है जो यह कर सकती है

http://usersnap.com डेस्कटॉप और मोबाइल दोनों के कई ब्राउज़रों का समर्थन करता है और सर्वर पर पिक्सेल सही स्क्रीनशॉट पाने के लिए बहुत सारे काम करता है, जो कि उनके पर्यावरण में उपयोगकर्ता क्या देखेगा।

अभियंता समाधान के रूप में समाधान पर ध्यान केंद्रित ...

जैसा कि हमारे लिए इंजीनियरिंग प्रकारों के लिए बहुत विशिष्ट है, हम एक विशिष्ट समाधान को कार्यान्वित करने में फंस जाते हैं। सवाल यह स्पष्ट नहीं है कि इन स्क्रीनशॉट को हल करने में क्या समस्या होगी, यानि अंतर्निहित आवश्यकता। अगर यह ज्ञात हो तो शायद अन्य सरल दृष्टिकोण उपलब्ध हैं?


खुले स्रोत के साथ-साथ भुगतान करने के लिए भुगतान किए जाने वाले विभिन्न टूल भी हैं। लेकिन, सुरक्षा कारणों को ध्यान में रखते हुए। मैं आपको Google द्वारा 'सेव टू ड्राइव' एक्सटेंशन का उपयोग करने का सुझाव दूंगा।

यह आपको सीधे अपने Google ड्राइव पर स्क्रीनशॉट को सहेजने और स्क्रीनशॉट के साथ सहेजने का एक और अधिक सुरक्षित तरीका प्रदान करेगा, यह उपयोगकर्ताओं को Google ड्राइव पर चित्र या अन्य दस्तावेज सहेजने की अनुमति देता है।

// दूसरा सुझाव //

यदि आप उपरोक्त एक्सटेंशन का उपयोग नहीं करना चाहते हैं तो आप 'ब्लिपशॉट' का उपयोग कर सकते हैं, यह एक ओपन सोर्स टूल है, जो गिटहब पर भी उपलब्ध है।

// तीसरा सुझाव //

तीसरा सबसे अच्छा समाधान पूर्ण पृष्ठ स्क्रीन कैप्चर है

यह तीन टूल Google क्रोम के साथ-साथ अन्य ब्राउज़र के लिए सबसे अच्छे रेटेड स्क्रीनशॉट टूल हैं।

मुझे उम्मीद है इससे आपको मदद मिली होगी!





webpage-screenshot