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

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

एचटीएमएल-टू-इमेज कैसे काम करता है?

एचटीएमएल-टू-इमेज पुस्तकालय बेस 64 डेटा यूआरएल के रूप में एक छवि तैयार करता है। यह पीएनजी, जेपीजी और एसवीजी सहित कई आउटपुट स्वरूपों का समर्थन करता है। इस रूपांतरण को करने के लिए, पुस्तकालय इस एल्गोरिथम का उपयोग करता है:

  1. लक्ष्य HTML तत्व, उसके बच्चे, और किसी भी संलग्न छद्म-तत्वों का एक क्लोन बनाएं।
  2. सभी क्लोन किए गए तत्वों के लिए स्टाइल कॉपी करें और स्टाइलिंग इनलाइन एम्बेड करें।
  3. प्रासंगिक वेब फोंट एम्बेड करें, यदि कोई हो।
  4. मौजूद किसी भी चित्र को एम्बेड करें।
  5. क्लोन किए गए नोड को XML और फिर SVG में बदलें।
  6. डेटा URL बनाने के लिए SVG का उपयोग करें।
instagram viewer

चेतावनी और सीमाएं

भले ही एचटीएमएल-टू-इमेज एक बेहतरीन लाइब्रेरी है, लेकिन यह परफेक्ट नहीं है। इसकी कुछ चेतावनियाँ हैं, अर्थात्:

  • लाइब्रेरी इंटरनेट एक्सप्लोरर या सफारी में काम नहीं करेगी।
  • यदि आप जिस HTML को कनवर्ट करने का प्रयास करते हैं, उसमें एक दागी कैनवास तत्व शामिल है, तो लाइब्रेरी विफल हो जाएगी। जैसा एमडीएन बताते हैं, आपके कैनवास तत्व में गैर-CORS-अनुमोदित डेटा शामिल करने से यह कलंकित हो जाएगा।
  • चूंकि ब्राउज़र डेटा यूआरएल के अधिकतम आकार पर सीमाएं लगाते हैं, इसलिए एचटीएमएल के आकार की सीमाएं हैं जो पुस्तकालय परिवर्तित कर सकता है।

पुस्तकालय का उपयोग करना

लाइब्रेरी को आज़माने के लिए, सबसे पहले आपको अपनी स्थानीय मशीन पर एक प्रोजेक्ट डायरेक्टरी बनाने की आवश्यकता है। इसके बाद, उस निर्देशिका में html-to-image का उपयोग करके स्थापित करें एनपीएम पैकेज मैनेजर. यहाँ इसे स्थापित करने के लिए टर्मिनल कमांड है:

NPM इंस्टॉल- एचटीएमएल-टू-इमेज सहेजें

पुस्तकालय का उपयोग करना थोड़ा आसान बनाने के लिए आपको एक जावास्क्रिप्ट बंडलर भी स्थापित करना चाहिए। एस्बिल्ड बंडलर पैकेज नोड मॉड्यूल को वेब-संगत स्क्रिप्ट में मदद कर सकता है।

NPM इंस्टॉल एस्बिल्ड

आपको बस इतना ही इंस्टॉल करना है। इसके बाद, नाम की एक फाइल बनाएं index.html अपनी निर्देशिका में, और इसे अपनी पसंद के वेब सर्वर के साथ परोसें। निम्नलिखित कोड को index.html में डालें:

<!डॉक्ट टाइप एचटीएमएल>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<मेटा नाम ="व्यूपोर्ट"
 सामग्री ="चौड़ाई = डिवाइस-चौड़ाई, उपयोगकर्ता-स्केलेबल = नहीं, प्रारंभिक-पैमाना = 1.0, अधिकतम-पैमाना = 1.0, न्यूनतम-पैमाना = 1.0">
<मेटा http-equiv="एक्स-UA- संगत" सामग्री ="यानी = बढ़त">
<शीर्षक>दस्तावेज़</title>
<शैली>
 .रंगीन-div {
 गद्दी: 3rem;
 रंग सफेद;
 पृष्ठभूमि-छवि: रैखिक-ढाल (दाईं ओर, पीला, रेबेकापर्पल);
 सीमा: 1px ठोस काला;
 मार्जिन: 1rem ऑटो;
 फ़ॉन्ट-आकार: 3rem;
 फ़ॉन्ट-परिवार: घसीट;
 }
</style>
</head>
<तन>
<डिव क्लास ="रंगीन-दिवा">
 मैं'मैं एक स्क्रीनशॉट में होने जा रहा हूँ!
</div>
<डिव क्लास ="लंबे समय पाठ">
 मैं'मी पर्याप्त वर्बोज़ पैराग्राफ का एक उदाहरण है कि
 दिखाता है कि जावास्क्रिप्ट में स्क्रीनशॉट लेना है
 निम्नलिखित कारणों से वास्तव में बहुत आसान है:
<यूएल>
<ली>कारण 1</li>
<ली>कारण 2</li>
<ली>कारण 2</li>
</ul>
</div>
<स्क्रिप्ट स्रोत ="out.js"></script>
</body>
</html>

यह कोड पृष्ठ पर दो तत्व बनाता है: एक ढाल पृष्ठभूमि के साथ एक div, और कुछ पाठ और एक अन्य div के अंदर एक अनियंत्रित सूची। इसके बाद, आप इन तत्वों को छवियों में बदलने के लिए जावास्क्रिप्ट लिखेंगे। निम्नलिखित कोड को एक नई फ़ाइल में रखें जिसे script.js कहा जाता है:

आयात * जैसा htmlटूइमेज से "एचटीएमएल-टू-इमेज";
कॉन्स्ट एलिम्स = ['.रंगीन-div', '.लॉन्ग-टेक्स्ट']


हाथीप्रत्येक के लिए((एलेम, इंडस्ट्रीज़) => {
स्थिरांक नोड = दस्तावेज़.query चयनकर्ता (तत्व)
htmlटूइमेज.toPng(नोड)
 ।फिर(समारोह (डेटा यूआरएल) {
होने देना आईएमजी = नया छवि();
 img.src = डेटा यूआरएल;
दस्तावेज़।तन।अपेंड चाइल्ड(आईएमजी);
 })
 .पकड़(समारोह(गलती){
 कंसोल.त्रुटि ('ओह! कुछ गलत हो गया है!');
सांत्वना देनालॉग (त्रुटि)
 });
})

यह कोड कुछ चीजें करता है:

  • एचटीएमएल-टू-इमेज लाइब्रेरी इंपोर्ट करता है।
  • दो तत्वों को लक्षित करते हुए CSS चयनकर्ताओं से बनी एक सरणी बनाता है।
  • सरणी के प्रत्येक तत्व से डेटा URL के रूप में PNG छवि बनाता है।
  • एक आईएमजी टैग बनाता है और दो तत्वों की छवि प्रतियां बनाते हुए डेटा यूआरएल में इसकी स्रोत विशेषता सेट करता है।

अब बंडल की गई फ़ाइल को जनरेट करने के लिए esbuild का उपयोग करें (out.js) कि index.html आपके टर्मिनल में निम्नलिखित को चलाकर संदर्भित करता है:

 ./node_modules/.bin/esbuild script.js --बंडल --outfile=out.js

इस समय, यहां बताया गया है कि आपके ब्राउज़र में index.html कैसा दिखना चाहिए:

भले ही प्रतियां मूल के समान ही दिखती हैं, वे वास्तव में छवि तत्व हैं। आप इसकी पुष्टि कर सकते हैं अपने देव उपकरण खोलना और उनका निरीक्षण कर रहे हैं।

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

जावास्क्रिप्ट के साथ स्क्रीनशॉट लेना आसान है

HTML तत्वों से चित्र बनाने, या DOM के स्क्रीनशॉट लेने के लिए कोई मूल जावास्क्रिप्ट विधि नहीं है। हालाँकि, पुस्तकालयों और सेवाओं जैसे html-to-image की मदद से, यह एक आसान काम बन जाता है।

समान परिणाम प्राप्त करने के अन्य तरीके भी हैं, जैसे कि wkhtmltoimage लाइब्रेरी। पूरे वेब पेज के स्क्रीनशॉट लेने के लिए आप इस ओपन-सोर्स टूल का उपयोग कर सकते हैं।