HTML5 Canvas দিয়ে DIV কন্টেন্ট ইমেজ (PNG/JPG) হিসেবে সেভ করার পদ্ধতি

html2canvas লাইব্রেরি ব্যবহার করুন

HTML 엘িমেন্ট (DIV, Section ইত্যাদি) রেন্ডার করে ক্যানভাসে কনভার্ট করে html2canvas লাইব্রেরিটি দেয়। এরপর ক্যানভাস থেকে toDataURL() দিয়ে ইমেজ ফাইল পাওয়া যায়।

ধাপাবলী

1. html2canvas লাইব্রেরি ইনক্লুড করুন (CDN: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js)।
2. টার্গেট DIV সিলেক্ট করুন।
3. html2canvas(element).then(canvas => ...) প্রমিস হ্যান্ডল করুন।

কোড উদাহরণ

 {
    // ১. পেজে প্রিভিউ দেখান
    document.body.appendChild(canvas);

    // ২. ডাউনলোড লিংক তৈরি
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'div-content.png';
    link.click();
  });
}
</script>

লিমিটেশন: ক্রস-অরিজিন ইমেজ, কাস্টম ফন্ট, CSS ফিল্টার কিছু কেসে রেন্ডার হয় না। সিকিউরিটি পলিসি (CORS) মেনে চলতে হয়।