हमें अपने मार्कअप के उन हिस्सों को कैप्चर करने (छवि में बदलने) की आवश्यकता है जो हमारी वेबसाइट को लेआउट करते हैं और उस कैप्चर की गई छवि को सहेजना या उसके साथ कुछ करना है। इसलिए, हमें इस वर्णित व्यवहार को प्राप्त करने का एक तरीका तैयार करना आवश्यक है।
चूंकि हमारी समस्या में केवल कैनवास ही नहीं बल्कि किसी भी मार्कअप तत्व को कैप्चर करना शामिल है, यह थोड़ा जटिल है और विशेष रूप से यदि हम इसे स्क्रैच से करने की योजना बनाते हैं। इसलिए, हमारी आसानी के लिए हम एक थर्ड-पार्टी लाइब्रेरी, html2canvas का उपयोग करेंगे जो ठीक वही करता है जो नाम से पता चलता है, वांछित मार्कअप को कैनवास में बदलना, जिसके बाद हम कैनवास तत्व को छवि के रूप में आसानी से डाउनलोड कर सकते हैं।
उदाहरण
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <style> #capture{ height: 300px; width: 300px; display: flex; flex-direction: column; background-color: rgb(43, 216, 216); } span{ flex: 1; width: 100%; display: flex; text-align: center; justify-content: center; align-items: center; color: #ffffff; font-size: 20px; } #first{ background-color: rgb(15, 168, 15); } #second{ background-color: rgb(43, 93, 228); } #third{ background-color: rgb(194, 55, 13); } </style> <body> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script> const download = () => { html2canvas(document.querySelector('#capture')).then(canvas => { document.body.appendChild(canvas); }); } </script> <div id='capture'> <span id='first'>First Block</span> <span id='second'>Second Block</span> <span id='third'>Third Block</span> </div> <button onclick="download()"> Download </button> </body> </html>
आउटपुट
और निम्नलिखित कोड का आउटपुट होगा:
डाउनलोड बटन पर क्लिक करने के बाद
ध्यान दें कि दूसरी छवि में "डाउनलोड" बटन के पास एक कैनवास है, जिसे हम बस राइट-क्लिक करके अपने स्थानीय स्टोरेज में सहेज सकते हैं।
