कैप्चरिंग डोम एलीमेंट्स स्क्रीनशॉट: सर्वर साइड वी.एस. क्लाइंट साइड दृष्टिकोण

कुछ हफ़्ते पहले, मैंने Chatilyzer के बारे में लिखा था - एक नया साइड प्रोजेक्ट जो मैं पिछले महीने में काम कर रहा था।

ऐप और ऐप के प्रवाह के बारे में एक त्वरित अवलोकन: Chatilyzer आपको अपने व्हाट्सएप चैट के बारे में आंकड़े प्राप्त करने की अनुमति देता है। एप्लिकेशन को काम करने के लिए, आपको एक व्हाट्सएप चैट के निर्यात * .txt फ़ाइल को अपलोड करना होगा। Chatilyzer पाठ को पार्स और विश्लेषण कर रहा है, और इसमें से कुछ दिलचस्प डेटा निकाल रहा है। फिर, आपको एक परिणाम पृष्ठ पर भेजा जा रहा है जहाँ आपको अपनी चैट गतिविधि का एक अच्छा दृश्य दिखाई देता है।

Chatilyzer परिणाम पृष्ठ का एक उदाहरण

इस वेब ऐप को विकसित करते समय मेरे सामने आने वाली चुनौतियों में से एक था उपयोगकर्ताओं को परिणाम पृष्ठ का स्क्रीनशॉट बनाने की अनुमति देना, और इसे डाउनलोड करना ताकि वे इसे अपने समूह में साझा कर सकें - बजाय पृष्ठ पर एक यूआरएल साझा करने के।

सर्वर साइड (NodeJS) दृष्टिकोण

मैंने PhantomJS और "Node Webshot" नामक एक NPM मॉड्यूल का उपयोग करते हुए सर्वर साइड दृष्टिकोण के साथ शुरुआत की। इसमें एक बहुत ही सरल एपीआई है जो आपको दिए गए यूआरएल से स्क्रीनशॉट बनाने की अनुमति देता है:

'webshot' से webshot आयात;

webshot ('https://chatilyzer.com', 'chat.png', फंक्शन (इरेट) {
  // स्क्रीनशॉट अब chat.png में सहेजा गया है
});

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

पेशेवरों:

  • एक रेडी-टू-यूज़ मॉड्यूल।
  • स्क्रीनशॉट को क्लाउड में सहेजा जा रहा है इसलिए यह किसी भी समय उपलब्ध है।
  • लचीली एपीआई जो आपको स्क्रीनशॉट की वांछित चौड़ाई और ऊंचाई निर्धारित करने की अनुमति देती है।

विपक्ष:

  • सभी या कुछ भी नहीं - स्क्रीनशॉट सभी पृष्ठ को कैप्चर करता है, और आप उस विशिष्ट तत्व को नियंत्रित नहीं कर सकते हैं जिसे आप कैप्चर करना चाहते हैं।
  • प्रतिपादन - अगर आपको स्क्रीनशॉट कैप्चर करने से पहले लोड करने के लिए async JS की प्रतीक्षा करने की आवश्यकता है, तो आप समस्याओं में भाग सकते हैं।
  • पर्यावरण - यह देखते हुए कि आप वास्तविक ब्राउज़र वातावरण में नहीं हैं, PhantomJS कस्टम / Google फ़ॉन्ट को उचित रूप से नहीं संभालता है, जो डिफ़ॉल्ट फ़ॉन्ट को आपके स्क्रीनशॉट में प्रदान करता है।
  • भंडारण - स्क्रीनशॉट बनाने के बाद, उपयोगकर्ता को एक मान्य छवि url वापस करने के लिए आपको इसे क्लाउड स्टोरेज में सहेजना होगा। मतलब, आपको क्लाउड स्टोरेज प्रदाता की आवश्यकता होती है जो संभावित रूप से आपको अधिक पैसा खर्च कर सकता है।
  • सुरक्षा - यदि स्क्रीनशॉट का डेटा संवेदनशील है, तो क्लाउड में प्रतिलिपि सहेजना एक अच्छा तरीका नहीं है।

EDIT: समुदाय से कुछ प्रतिक्रिया प्राप्त करने के बाद, यह "Puppeteer" नामक एक एनपीएम मॉड्यूल का उपयोग करते हुए एक और सर्वर साइड समाधान करता है जो हेडलेस क्रोम के शीर्ष पर चलता है। यहाँ कैसे Puppeteer के साथ एक स्क्रीनशॉट बनाने के लिए है:

const कठपुतली = आवश्यकता ('कठपुतली');

(async () => {
  const ब्राउज़र = कठपुतली का इंतजार करें। पंच ();
  const पेज = browser.newPage () का इंतजार करें;
  wait page.goto ('https://chatilyzer.com');
  प्रतीक्षा करें पृष्ठ .screenshot ({पथ: 'chatilyzer.png'});

  ब्राउज़र का इंतजार करें। क्लोज़ ();
}) ();

यह मॉड्यूल ऑल या कुछ नहीं, रेंडरिंग और पर्यावरण के मुद्दों को हल करेगा, क्योंकि यह क्रोम के समान रेंडर इंजन प्रदान करता है।

क्लाइंट साइड दृष्टिकोण

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

मुझे "html2canvas" नामक एक बहुत ही शांत जेएस लाइब्रेरी मिली, जो कि नाम से पता चलता है, एक HTML तत्व को एक कैनवास तत्व में बदल देगा।

html2canvas वेबसाइट

जैसा कि आप देख सकते हैं, इसका उपयोग करना बहुत आसान है। मूल रूप से आप html2canvas विधि को कॉल कर रहे हैं, और एक तर्क के रूप में एक DOM तत्व पास कर रहे हैं। यह विधि एक वादा देती है जिसका उपयोग आप एक कैनवास तत्व निकालने के लिए कर सकते हैं।

html2canvas (document.querySelector ("# कैप्चर"))। उसके बाद (कैनवासएल्म =>>
    document.body.appendChild (canvasElm);
});

अगला, आप स्क्रीनशॉट डाउनलोड करने के लिए अपने उपयोगकर्ता को सक्षम करना चाहते हैं।

जेएस toDataURL विधि का उपयोग करके इसे करने का तरीका जैसा कि आप नीचे देख सकते हैं:

// एक बेस 64 डेटा स्ट्रिंग प्राप्त करें
var imageType = 'image / png';
var imageData = कैनवसएल्म.ऑटडाउटल (इमेज टाइप);
// वर्तमान विंडो में डेटा स्ट्रिंग खोलें
document.location.href = imageData.replace (imageType, 'image / octet-stream');

एक अन्य जेएस लाइब्रेरी है जिसे "कैनवस 2 इमेज" कहा जाता है। मैं इसे खुद से लिखने के बजाय इसका उपयोग करने की सलाह देता हूं क्योंकि यह अधिक लचीलापन प्रदान करता है और आपको कैनवास तत्व से एक छवि टैग उत्पन्न करने की अनुमति देता है। तो आप का उपयोग करके एक ही परिणाम प्राप्त कर सकते हैं:

Canvas2Image.saveAsPNG (कैनवास ईएलएम, चौड़ाई, ऊंचाई);

पेशेवरों:

  • WYSIWYG - स्क्रीन पर आप जो भी देख रहे हैं उसका परिणाम 1: 1 है।
  • कोई सर्वर साइड नहीं - सभी ब्राउज़र में चल रहा है।
  • सुरक्षा - यदि स्क्रीनशॉट का डेटा संवेदनशील है, तो क्लाइंट की ओर से इसे और अधिक सुरक्षित रूप से कैप्चर करना क्योंकि सर्वर को परिणामों की जानकारी नहीं है, और कहीं और कॉपी को सहेजना नहीं है।

विपक्ष:

  • संगतता - html2canvas सभी ब्राउज़रों में समर्थित नहीं है
  • महंगा - हालांकि html2canvas एक वादा लौटाता है, यह अभी भी एक महंगी कार्रवाई है, और बड़े और जटिल घटकों के लिए, परिणाम प्राप्त करने से पहले कुछ सेकंड लग सकते हैं।
  • संकीर्ण दृश्य - यदि आप एक संकीर्ण स्क्रीन (उदाहरण के लिए मोबाइल में) का उपयोग कर रहे हैं, तो स्क्रीनशॉट संकीर्ण होगा और साथ ही यह वास्तविक दृश्य से स्क्रीनशॉट कैप्चर कर रहा है (जो कि कैनवस 2 html के तर्क के रूप में फिक्स चौड़ाई को पार करके हल किया जा सकता है) , या पृष्ठभूमि में वांछित चौड़ाई के साथ एक आइफ्रेम खोलकर, स्क्रीनशॉट को वहां कैप्चर करें, और पोस्टमास्टेज के साथ छवि डेटा वापस भेजें)।
  • तत्वों का समर्थन - html2canvas में सभी HTML तत्वों का समर्थन नहीं किया जाता है। उदाहरण के लिए, अन्य कैनवास तत्वों, iframes, और फ़्लैश, को बिल्कुल भी प्रस्तुत नहीं किया जाएगा।

निष्कर्ष के तौर पर

एचटीएमएल तत्वों से स्क्रीनशॉट कैप्चर करने के दो तरीके हैं, और आपको यह सोचना चाहिए कि आपके ऐप की ज़रूरत क्या है।

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

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

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

आशा है आपको लेख अच्छा लगा होगा। इसे ताली बजाओ आपको यह पसंद आया :)

क्या आप NodeJS के साथ वेब पेजों के स्क्रीनशॉट बनाने के अन्य तरीकों के बारे में जानते हैं? टिप्पणियों में साझा करें!