জাভাস্ক্রিপ্ট ব্যবহার করে ছবি বেস৬৪ ডেটা URL-এ রূপান্তর করা

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

উদাহরণ

function getDataUrl(img) {
  // ক্যানভাস তৈরি
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // প্রস্থ ও উচ্চতা সেট
  canvas.width = img.width;
  canvas.height = img.height;
  // ছবি আঁকা
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL('image/jpeg');
}

// ছবি নির্বাচন
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
  const dataUrl = getDataUrl(event.currentTarget);
  console.log(dataUrl);
});

আউটপুট

এটি নিচের মতো আউটপুট দেবে:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB