জাভাস্ক্রিপ্টে ইমেজ থেকে ডেটা URL (Base64) কীভাবে পাবেন?

Canvas API ব্যবহার করে ইমেজকে Data URI-এ রূপান্তর

HTML পেজের <img> ট্যাগ থেকে ইমেজ ডেটা URL (Base64 এনকোডেড) বানানোর জন্য <canvas> এলিমেন্ট ব্যবহার করা হয়। এটি ক্লায়েন্ট-সাইডে ইমেজ প্রসেসিং, আপলোড előtt প্রিভিউ, বা লোকাল স্টোরেজে সংরক্ষণের জন্য উপযোগী।

ধাপে ধাপে পদ্ধতি

1. canvas এলিমেন্ট তৈরি করুন।
2. ক্যানভাসের প্রস্থ ও উচ্চতা ইমেজের সাথে মিলান।
3. drawImage() দিয়ে ইমেজ ক্যানভাসে আঁকুন।
4. toDataURL() মেথড কল করে Base64 ডেটা URL পান।

সম্পূর্ণ ফাংশন

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);
  
  // ৪. ডেটা URL রিটার্ন (ডিফল্ট image/png)
  return canvas.toDataURL('image/jpeg'); // ফরম্যাট নির্দিষ্ট করুন: 'image/png', 'image/jpeg', 'image/webp'
}

ব্যবহার উদাহরণ

// ইমেজ সিলেক্ট
const img = document.querySelector('#my-image');

// লোড হওয়ার পর ডেটা URL বের করুন (ক্যাশ থেকে লোড হলে onload ফায়ার নাও হতে পারে)
if (img.complete) {
  console.log(getDataUrl(img));
} else {
  img.addEventListener('load', () => {
    console.log(getDataUrl(img));
  });
}

আউটপুট উদাহরণ

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB...

গুণগত মানদণ্ড ও সীমাবদ্ধতা

সিকিউরিটি নোট

ডেটা URL সরাসরি src-এ সেট করা যায়: img.src = dataUrl। কিন্তু সেনসিটিভ ইমেজ (প্রোফাইল ফটো, ডকুমেন্ট) Base64-এ কনভার্ট করে লোকাল স্টোরেজে রাখা নিরাপদ নয় — সার্ভার-সাইড আপলোডই ভালো।