জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল পেজ ট্যাগ থেকে ইমেজকে ডেটা ইউআরআই-তে রূপান্তর করতে, আপনাকে প্রথমে একটি ক্যানভাস উপাদান তৈরি করতে হবে, এর প্রস্থ এবং উচ্চতা ছবির সমান সেট করতে হবে, এটিতে ছবিটি আঁকতে হবে এবং অবশেষে এটিতে 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
