हमें अपने मार्कअप के उस हिस्से (भागों) को कैप्चर (छवि में बदलना) आवश्यक है जो हमारी वेबसाइट को प्रस्तुत करता है और उस कैप्चर की गई छवि को सहेजता है या इसके साथ कुछ करता है। इसलिए, हमें एक ऐसा तरीका तैयार करने की आवश्यकता है जिसका उपयोग करके हम इस वर्णित व्यवहार को प्राप्त कर सकें।
चूंकि हमारी समस्या में किसी भी मार्कअप तत्व को कैप्चर करना शामिल है और न केवल कैनवास, यह थोड़ा जटिल है और विशेष रूप से यदि हम इसे खरोंच से करने की योजना बनाते हैं। इसलिए, हमारी आसानी के लिए हम एक तृतीय पक्ष पुस्तकालय का उपयोग करेंगे, htmltocanvas यह वही करता है जो नाम से पता चलता है, वांछित मार्कअप को कैनवास में परिवर्तित करना, जिसके बाद हम कैनवास तत्व को एक छवि के रूप में आसानी से डाउनलोड कर सकते हैं।
उदाहरण
ऐसा करने के लिए कोड होगा -
<!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> आउटपुट
और निम्न कोड का आउटपुट होगा -
डाउनलोड बटन क्लिक करने के बाद
ध्यान दें कि दूसरी छवि में "डाउनलोड" बटन के बगल में एक कैनवास है, जिसे हम बस राइट क्लिक करके अपने स्थानीय स्टोरेज में सहेज सकते हैं।