জাভাস্ক্রিপ্টে ইমেজ ডেটা ইউআরএল কীভাবে পাবেন?

জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল পেজ ট্যাগ থেকে ইমেজটিকে ডাটা ইউআরআই-তে রূপান্তর করতে, আপনাকে প্রথমে একটি ক্যানভাস উপাদান তৈরি করতে হবে, এর প্রস্থ এবং উচ্চতা ছবির সমান সেট করতে হবে, এটিতে ছবিটি আঁকতে হবে এবং অবশেষে এটিতে toDataURL পদ্ধতিতে কল করতে হবে।

এটি ছবির বেস64 এনকোড করা ডেটা URI ফেরত দেবে। উদাহরণস্বরূপ, যদি আপনার আইডি my-image সহ একটি ছবি থাকে, তাহলে আপনি নিম্নলিখিত −

উদাহরণ

function getDataUrl(img) {
   // Create canvas
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   // Set width and height
   canvas.width = img.width;
   canvas.height = img.height;
   // Draw the image
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}
// Select the image
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
   const dataUrl = getDataUrl(event.currentTarget);
   console.log(dataUrl);
});

আউটপুট

এটি আউটপুট দেবে −

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB