আমাদেরকে আমাদের মার্কআপের অংশ(গুলি) ক্যাপচার (ছবিতে রূপান্তর) করতে হবে যা আমাদের ওয়েবসাইট তৈরি করে এবং সেই ক্যাপচার করা ছবিটি সংরক্ষণ করে বা এটির সাথে কিছু করতে পারে। সুতরাং, আমাদের এমন একটি উপায় তৈরি করতে হবে যা ব্যবহার করে আমরা এই বর্ণিত আচরণটি অর্জন করতে পারি।
যেহেতু আমাদের সমস্যার মধ্যে যেকোন মার্কআপ উপাদান ক্যাপচার করা এবং শুধু ক্যানভাস নয়, এটি কিছুটা জটিল এবং বিশেষ করে যদি আমরা এটি স্ক্র্যাচ থেকে করার পরিকল্পনা করি। তাই, আমাদের স্বাচ্ছন্দ্যের জন্য আমরা একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করব, 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> আউটপুট
এবং নিম্নলিখিত কোডের আউটপুট হবে −
ডাউনলোড বোতামে ক্লিক করার পর
মনে রাখবেন যে দ্বিতীয় চিত্রটিতে "ডাউনলোড" বোতামের সংলগ্ন একটি ক্যানভাস রয়েছে, যা আমরা কেবল রাইট ক্লিক করে আমাদের স্থানীয় স্টোরেজে সংরক্ষণ করতে পারি।
