আমাদের ওয়েবসাইটের মার্কআপের যেকোনো অংশ ক্যাপচার করে (ইমেজে রূপান্তর করে) সেটি সংরক্ষণ বা অন্য কাজে ব্যবহার করতে হবে। যেহেতু সমস্যাটি শুধু ক্যানভাস (canvas) না, যেকোনো মার্কআপ এলিমেন্ট ক্যাপচার করার কথা, তাই এটি একটু জটিল, বিশেষ করে যদি আমরা স্ক্র্যাচ থেকে করতে চাই। তাই সুবিধার্থে আমরা একটি থার্ড-পার্টি লাইব্রেরি html2canvas ব্যবহার করব যা নামানুসারে কাজ করে — মার্কআপকে ক্যানভাসে রূপান্তর করে, তারপর ক্যানভাস এলিমেন্টকে ইমেজ হিসেবে ডাউনলোড করা যায়।
উদাহরণ
কোডটি নিচে দেওয়া হলো —
JS Bin First Block Second Block Third Block
আউটপুট
উপরের কোডের আউটপুট হবে —
DOWNLOAD বাটনে ক্লিক করার পর —
দ্রষ্টব্য যে দ্বিতীয় ছবিতে "Download" বাটনের পাশে একটি ক্যানভাস দেখাচ্ছে, যেটি রাইট-ক্লিক করে লোকাল স্টোরেজে সংরক্ষণ করা যায়।
