हम पृष्ठों के स्क्रीनशॉट कैसे लेते हैं

नमस्ते!

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

अद्यतन फ़ीड दिखाने के लिए यह सेवा हमारे लिए अत्यंत महत्वपूर्ण है। और वास्तविकता के लिए तेजी से और करीब (पढ़ें - फ्लैश समर्थन) यह काम करता है, उपयोगकर्ताओं के लिए यह अधिक सुखद है।




इंटरनेट की खोज के बाद, निम्नलिखित विकल्प पाए गए:

• 1. साइटें

• BrowserShots - जाहिर है, एक सम्मानित अनुभवी। यह मुफ़्त है, यह ब्राउज़रों के एक समूह का समर्थन करता है, यह स्क्रीनशॉट को इसके बिना पैसे के लिए उच्च प्राथमिकता के साथ ले सकता है। खुशी यह है कि यह उद्घाटन करता है, स्रोत पायथन में है। और दुख की बात यह है कि ज्यादातर ब्राउज़रों के स्क्रीनशॉट केवल काम नहीं करते हैं, फ्लैश समर्थित नहीं है, लिया गया कुछ स्क्रीनशॉट टूटने लगता है। लेआउट डिजाइनरों पर ध्यान केंद्रित।
• वेबशॉट्स प्रो - भी Google के पहले पेज से। उनके पास एपीआई है, जो पहले से ही दिलचस्प है, जिसका उपयोग करने की लागत मात्रा, चित्रों के आकार और सेवा लेबल की उपस्थिति पर निर्भर करती है। लेकिन - आप यह नहीं मानते, लड़के - वे IE का उपयोग करके स्क्रीनशॉट लेते हैं! सामान्य तौर पर, उनके साथ सब कुछ स्पष्ट है। खैर, वास्तव में वे इससे परे संदिग्ध दिखते हैं।
• thumbalizr बीटा - होनहार लोग, एपीआई उपलब्ध, भुगतान सेवा वॉटरमार्क को अक्षम करने में शामिल हैं, लेकिन वे फ्लैश का समर्थन नहीं करते हैं।
• url2png - पिछले सभी साइटों, कुछ हद तक थंबलीज़्र को छोड़कर, स्पष्ट रूप से, razdolbayski- परवाह न करें। और, यह मुझे लगता है, वे उसी तरह काम करते हैं। url2png एक बहुत अच्छा प्रभाव छोड़ता है - हालांकि, फिर से, यह फ्लैश को नहीं हटाता है और बाकी की तुलना में अधिक खर्च होता है।
• websnapr - ठीक है, बीच में आधा, कुछ खास नहीं।

• 2. कार्यक्रम

• kthml2png एक सम्मानित वृद्ध व्यक्ति है। लगभग समर्थित नहीं है। सामान्य तौर पर, हमने इसकी कोशिश नहीं की है।
• CutyCapt एक अधिक वर्तमान कार्यक्रम है। लेकिन - "क्यूटकैप में कई ज्ञात क्विर्क हैं।" कभी-कभी वह केवल स्क्रीन लेने का प्रबंधन नहीं करता है। एक फ्लैश के साथ दोस्त बनाना कठिन है।
• PhantomJS - जहाँ तक मुझे पता है, इस तरह की परियोजनाओं में सबसे अधिक सक्रिय है। सुविधाओं का एक गुच्छा, न केवल स्क्रीनशॉट। आप उदाहरण के लिए, पेज के संदर्भ में जावास्क्रिप्ट निष्पादित कर सकते हैं। लेकिन प्लगइन्स (फ्लैश सहित) के बारे में लेखक की स्थिति इस प्रकार है - यह काम करना चाहिए, लेकिन मैं कुछ भी गारंटी नहीं देना चाहता और न ही करूंगा। इसके साथ दिलचस्प समस्याओं को नीचे वर्णित किया जाएगा :)

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

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

इस उपयोगिता के विकासकर्ता ने स्वयं किसी बिंदु पर सुझाव दिया कि हम PhantomJS पर स्विच करते हैं - जिसका हमने लाभ उठाया। स्थिति फिर से कुछ बेहतर हो गई है, लेकिन सही नहीं है। यह कभी-कभी लटका भी होता है, और ऐसे लिंक होते हैं जो हमेशा त्रुटियों का कारण बनते हैं, साथ ही छिटपुट विफलताओं के मामले भी होते हैं। फ्लैश भी काम नहीं करता था, इसने काले आयतों को दिखाया, जो सिद्धांत रूप में पहले से ही हमें कम या ज्यादा अनुकूल करते थे।
लेकिन PhantomJS, एक पृष्ठ पर js निष्पादित करने की क्षमता के कारण, हमें DOM से एक पृष्ठ विवरण (मेटा टैग या पाठ से सीधे एक गुप्त एल्गोरिथ्म) प्राप्त करने की अनुमति देता है, एक शीर्षक, और संभवतः सभी प्रकार की दिलचस्प चीजें करता है, उदाहरण के लिए, उन पृष्ठों को परिभाषित करें, जो iframes में खुद को दिखाने से मना करते हैं। जो हमारे लिए भी एक महत्वपूर्ण विशेषता है। HTML ऐसी गड़बड़ी हो सकती है कि सर्वर पर इसके साथ काम करने से दर्द हो सकता है; ब्राउज़र इंजन किसी भी बदमाशी को सहन करने के लिए दशकों से आदी रहे हैं।
इसलिए हम लंबे समय तक उसके साथ रहते थे, लेकिन जब हमने उचित मात्रा में लिंक जोड़ना शुरू किया, तो फैंटम ने हमें कुछ नया करने से खुश किया - समानांतर में चल रहे कार्यक्रम की कई प्रतियां, फ्लैश के साथ लिंक को संसाधित करना, इसे अचानक हटाना शुरू कर दिया, लेकिन, एक स्क्रीनशॉट में कहें वीडियो एक अन्य लिंक से आया, और दूसरे स्क्रीनशॉट में, वीडियो के स्थान पर, एक साथ दो वीडियो का संयोजन था। संक्षेप में, रक्त-आंत-विच्छेदित।

खैर, इसे ठीक करें, मैंने सोचा था, और याद किया कि Google क्रोम में आमतौर पर एक अंतर्निहित फ्लैश प्लेयर होता है, और यह पहले से ही स्पष्ट था कि सभी स्व-लिखित कार्यक्रम विश्वसनीयता की कमी से ग्रस्त हैं। Chrome को इसके लिए दोषी ठहराना मुश्किल है :) इसके अलावा, शुद्ध js पर एक्सटेंशन लिखना बहुत आसान है जो कि सभी PhantomJS और भी बहुत कुछ कर सकता है।
उन्होंने सभी मैजिक कमांड लाइन स्विच भी पाए जो आपको बिना इंटरफ़ेस और बिना किसी कष्टप्रद सुझावों के इसे चलाने की अनुमति देते हैं। वह एसटीडीआरआर में लिखना भी जानता था, और "गुप्त" मोड में काम करता है, जो स्क्रीनशॉट लेने का सबसे दोहरावदार परिणाम प्रदान करता है। CSS चयनकर्ताओं की पूरी शक्ति हमारे लिए उपलब्ध हो गई और एक फ्लैश सक्रिय हो गया ।
सामान्य तौर पर, Google Chrome ने हमारे सभी कामुक सपनों को पूरा किया ;)
वास्तव में स्क्रीनशॉट पूरी स्क्रीन के स्क्रीनशॉट के साथ लिया जाता है जिसमें ब्राउज़र काम करता है, अच्छी तरह से, विशेष, जादुई साइटों के लिए कुछ विशेष मामले।

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


इसलिए, यहां अपनी छोटी स्क्रीनशॉट सेवा प्राप्त करने के बारे में एक छोटी सी सूची दी गई है, जिसमें लंबी परीक्षाओं और त्रुटियों से बचा जा सकता है:

• नौकरी की कतार का उपयोग करें। मैं Resque की सलाह देता हूं, लेकिन यह * MQ, और Kestrel, एक संबंधपरक डेटाबेस भी हो सकता है। मुख्य बात यह है कि यह सामान्य रूप से कई समानांतर हैंडलर के साथ काम करता है।
• विभिन्न "डिस्प्ले" पर Xvfb सत्रों की आवश्यक संख्या चलाएं
• एक पंक्ति हैंडलर लिखें जो Google Chrome को आवश्यक मापदंडों के साथ लॉन्च करेगा, जैसे DISPLAY =: 1 / opt / google-chrome / google / chrome .... मापदंडों की एक सूची यहां पाई जा सकती है: http://src.chromium.org/svn/trunk/src/chrome/common/chrome_switches.cc
• Google Chrome एक्सटेंशन लिखें जो पेज लोडिंग के पूरा होने की निगरानी करता है और बाहरी दुनिया को संकेत भेजता है। दस्तावेज़: http://code.google.com/chrome/extensions/getstarted.html
• नौकरी की कतार में हैंडलर की आवश्यक संख्या निर्धारित करें, जिनमें से प्रत्येक अपने प्रदर्शन का उपयोग करेगा। यह जाँचना सुनिश्चित करें कि प्रदर्शन उपलब्ध है। यह X11 परिवार के कंसोल टूल के साथ करना आसान है।
• विस्तार से संकेत के साथ एक स्क्रीनशॉट लें, या कैप्चरविजेंटटैब विधि का उपयोग करें, लेकिन फिर फ्लैश (और अन्य प्लगइन्स) को हटाया नहीं जाएगा

चरणों के बारे में मत भूलना "..." और "लाभ!";)

अंत में, मुझे लगता है कि हमारे पास एक समाधान है जो मेरे द्वारा देखे गए सभी वाणिज्यिक समकक्षों से अधिक है।