অবশ্যই! একটি ব্লব ইউআরএল (Blob URL) থেকে স্থায়ী ছবিতে রূপান্তর করা সম্ভব। নিচে এর সংক্ষিপ্ত বাংলা ব্লগ পোস্টটি দেওয়া হলো:

ব্লব ইউআরএল (Blob URL) থেকে ইমেজ রূপান্তর ও সংরক্ষণ করুন

আপনি কি একটি ব্লব ইউআরএলকে (Blob URL) আবার ছবিতে রূপান্তর করতে চান? হ্যাঁ, এটা সম্ভব! তবে মনে রাখতে হবে, ব্লব ইউআরএলগুলো শুধু বর্তমান সেশনের জন্যই কার্যকর থাকে। অর্থাৎ, পেজ রিলোড বা বন্ধ করে ফেললে এই ইউআরএল আর কাজ করে না।

কিন্তু যদি আপনি ব্লব বা ব্লব ইউআরএলকে একটি স্থায়ী ছবিতে (যেমন Base64) রূপান্তর করতে চান, যাতে এটি লোকাল স্টোরেজ (localStorage) বা ডাটাবেসে সেভ করে রাখা যায়, তাহলে নিচের পদ্ধতি অনুসরণ করতে পারেন।

ব্লব ইউআরএল থেকে Base64 ইমেজে রূপান্তর

এখানে React/JavaScript ব্যবহার করে ধাপে ধাপে প্রক্রিয়াটি দেখানো হলো:

ধাপ ১: ব্লব ইউআরএল থেকে ব্লব (Blob) নিয়ে আসা

প্রথম ধাপে, fetch ব্যবহার করে ব্লব ইউআরএল থেকে ব্লব ডেটা আনতে হবে।

async function blobUrlToBase64(blobUrl) {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  return await blobToBase64(blob);
}

ধাপ ২: ব্লবকে (Blob) Base64-এ রূপান্তর করা

এরপর FileReader ব্যবহার করে ব্লব ডেটাকে Base64 স্ট্রিং-এ পরিণত করতে হবে।

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result); // Base64 স্ট্রিং
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

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

এখন, উপরের ফাংশনগুলো ব্যবহার করে একটি ব্লব ইউআরএলকে Base64 ইমেজে রূপান্তর করা যাক।

const blobUrl =
  "blob:http://localhost:5173/948366be-7f9d-4675-9936-4e9e784a5e28";
 
blobUrlToBase64(blobUrl).then((base64Image) => {
  console.log("Base64 Image:", base64Image);
 
  // এখন আপনি Base64 ইমেজটি ব্যবহার করতে পারবেন:
  // ১. <img src={base64Image} /> হিসেবে সেট করতে।
  // ২. লোকাল স্টোরেজে সেভ করতে।
  localStorage.setItem("myImage", base64Image);
});

লোকাল স্টোরেজ থেকে ইমেজ লোড

সেভ করা Base64 ইমেজটি লোকাল স্টোরেজ থেকে নিয়ে <img /> ট্যাগে দেখাতে পারেন।

const savedImg = localStorage.getItem("myImage");
if (savedImg) {
  document.getElementById("preview").src = savedImg;
}

<img id="preview" alt="Saved preview" />

সারসংক্ষেপ

• ব্লব ইউআরএল (blob: URL) অস্থায়ী এবং পেজ রিলোড হলে অকার্যকর হয়ে যায়।
• স্থায়ীভাবে সেভ বা পরে ব্যবহার করতে চাইলে এটিকে Base64 স্ট্রিং-এ রূপান্তর করুন।
• Base64 স্ট্রিং স্থায়ী এবং এটি লোকাল স্টোরেজে সহজেই সংরক্ষণ করা যায়।

Answer 2 Line by Line

অবশ্যই! একটি ব্লব ইউআরএলকে (Blob URL) स्थायी ছবিতে রূপান্তর করার পদ্ধতি নিচে বাংলায় সহজভাবে বর্ণনা করা হলো। প্রতিটি লাইনের সাথে "কী?", "কেন?", এবং "কীভাবে?"—এই প্রশ্নগুলোর উত্তর যোগ করা হয়েছে।

ব্লগ পোস্ট: ব্লব ইউআরএল (Blob URL) থেকে স্থায়ী ছবি তৈরি

আপনি কি ব্লব ইউআরএলকে আবার ছবিতে রূপান্তর করতে চান? হ্যাঁ, এটা সম্ভব, কিন্তু শুধুমাত্র একই সেশনের মধ্যে (অর্থাৎ, পেজ রিফ্রেশ বা বন্ধ করার আগে পর্যন্ত)। এরপর ব্লব ইউআরএলটি অকেজো হয়ে যায়।

কিন্তু যদি আপনি ব্লব বা ব্লব ইউআরএলকে একটি স্থায়ী ছবিতে (যেমন Base64) রূপান্তর করতে চান, যাতে এটি localStorage বা ডাটাবেসে সংরক্ষণ করা যায়, তবে তার পদ্ধতি নিচে দেওয়া হলো।

✅ ব্লব ইউআরএলকে ছবিতে (Base64) রূপান্তর

🧠 ধাপে ধাপে পদ্ধতি (রিঅ্যাক্ট/জাভাস্ক্রিপ্ট):

✅ ধাপ ১: ব্লব ইউআরএল থেকে ব্লব (Blob) নিয়ে আসা

async function blobUrlToBase64(blobUrl) {

• কী? (What?) এটি একটি async ফাংশন যা একটি ব্লব ইউআরএলকে ইনপুট হিসেবে নেয়।
• কেন? (Why?) এই ফাংশনটি ব্লব ইউআরএল থেকে আসল ইমেজ ডেটা বের করে Base64 ফরম্যাটে রূপান্তর করার পুরো প্রক্রিয়াটি সম্পন্ন করবে।
• কীভাবে? (How?) async/await ব্যবহার করে নেটওয়ার্ক অনুরোধের ফলাফল পাওয়ার জন্য অপেক্ষা করে।

const response = await fetch(blobUrl);

• কী? (What?) fetch ব্যবহার করে ব্লব ইউআরএল-এ একটি নেটওয়ার্ক অনুরোধ পাঠানো হচ্ছে।
• কেন? (Why?) ইউআরএল-এ থাকা ছবিটি বা ডেটাটি পাওয়ার জন্য। যেহেতু ব্লব ইউআরএল ব্রাউজারের মেমরিতে থাকা একটি ফাইলকে নির্দেশ করে, fetch সেই ডেটা পড়তে পারে।
• কীভাবে? (How?) fetch() ফাংশনে ব্লব ইউআরএলটি পাস করে এবং await দিয়ে রেসপন্স না আসা পর্যন্ত অপেক্ষা করে।

const blob = await response.blob();

• কী? (What?) fetch থেকে পাওয়া রেসপন্সকে ব্লব ফরম্যাটে রূপান্তর করা হচ্ছে।
• কেন? (Why?) কারণ ছবির আসল বাইনারি ডেটা আমাদের প্রয়োজন, যা .blob() মেথডের মাধ্যমে পাওয়া যায়। এই ব্লব ডেটাকেই আমরা পরে Base64 স্ট্রিং-এ পরিণত করব।
• কীভাবে? (How?) রেসপন্স অবজেক্টের .blob() মেথডটি কল করে।

  return await blobToBase64(blob);
}

• কী? (What?) প্রাপ্ত ব্লব অবজেক্টটিকে blobToBase64 নামক আরেকটি ফাংশনে পাঠানো হচ্ছে।
• কেন? (Why?) দ্বিতীয় ধাপের ফাংশনটি আসল কাজটি করবে, অর্থাৎ ব্লবকে Base64 স্ট্রিং-এ রূপান্তর করবে।
• কীভাবে? (How?) blobToBase64(blob) কল করে, এবং তার ফলাফলের জন্য অপেক্ষা করে চূড়ান্ত Base64 স্ট্রিং রিটার্ন করছে।

✅ ধাপ ২: ব্লবকে Base64-তে রূপান্তর করা

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {

• কী? (What?) এটি একটি ফাংশন যা একটি ব্লব অবজেক্টকে Base64 স্ট্রিং-এ রূপান্তর করার জন্য একটি Promise রিটার্ন করে।
• কেন? (Why?) ফাইল পড়া একটি অ্যাসিঙ্ক্রোনাস (asynchronous) কাজ। Promise ব্যবহার করলে আমরা ফাইল পড়া শেষ হওয়ার পর কাজটি সফল (resolve) বা ব্যর্থ (reject) হয়েছে কিনা তা জানতে পারি।
• কীভাবে? (How?) new Promise কনস্ট্রাকটর ব্যবহার করে, যা দুটি ফাংশন (resolve, reject) প্যারামিটার হিসেবে নেয়।

const reader = new FileReader();

• কী? (What?) FileReader অবজেক্টের একটি নতুন ইনস্ট্যান্স তৈরি করা হচ্ছে।
• কেন? (Why?) FileReader একটি বিল্ট-ইন জাভাস্ক্রিপ্ট এপিআই যা ফাইল বা ব্লবের ডেটা পড়ার সুযোগ দেয়।
• কীভাবে? (How?) new FileReader() লিখে।

reader.onloadend = () => resolve(reader.result);

• কী? (What?) onloadend ইভেন্ট হ্যান্ডলার সেট করা হচ্ছে।
• কেন? (Why?) ফাইল বা ব্লব পড়া শেষ হলে এই ইভেন্টটি ফায়ার হয়। তখন reader.result-এর মধ্যে আমাদের কাঙ্ক্ষিত Base64 ডেটা স্ট্রিং থাকে।
• কীভাবে? (How?) যখন পড়া শেষ হয়, তখন resolve() ফাংশনটি কল করে reader.result (Base64 স্ট্রিং) প্রমিসের সফল ফলাফল হিসেবে পাঠানো হয়।

reader.onerror = reject;

• কী? (What?) onerror ইভেন্ট হ্যান্ডলার সেট করা হচ্ছে।
• কেন? (Why?) যদি ব্লবটি পড়ার সময় কোনো সমস্যা হয়, তাহলে আমরা যেন তা জানতে পারি।
• কীভাবে? (How?) কোনো ত্রুটি ঘটলে reject ফাংশনটি কল করে প্রমিসটি বাতিল করা হয়।

    reader.readAsDataURL(blob);
  });
}

• কী? (What?) FileReader-কে ব্লবটি পড়ার জন্য নির্দেশ দেওয়া হচ্ছে।
• কেন? (Why?) ব্লবের বাইনারি ডেটাকে একটি ডেটা ইউআরএল (Base64 এনকোডেড স্ট্রিং) হিসেবে পড়ার জন্য।
• কীভাবে? (How?) .readAsDataURL() মেথডে আমাদের ব্লব অবজেক্টটি পাস করে।

✅ ব্যবহারের উদাহরণ:

const blobUrl =
  "blob:http://localhost:5173/948366be-7f9d-4675-9936-4e9e784a5e28";
 
blobUrlToBase64(blobUrl).then((base64Image) => {
  console.log("Base64 Image:", base64Image);
  // এখন আপনি এটি ব্যবহার করতে পারেন:
  // ১. <img src={base64Image} /> তে সেট করতে পারেন
  // ২. localStorage-এ সেভ করতে পারেন
  localStorage.setItem("myImage", base64Image);
});

• কী? (What?) ওপরের ফাংশনটি ব্যবহার করে একটি ব্লব ইউআরএলকে Base64-তে রূপান্তর করে localStorage-এ সেভ করা হচ্ছে।
• কেন? (Why?) localStorage-এ সেভ করলে পেজ রিফ্রেশ হলেও ছবিটি হারিয়ে যাবে না।
• কীভাবে? (How?) .then() ব্যবহার করে Base64 স্ট্রিংটি পাওয়ার পর localStorage.setItem() দিয়ে সেভ করা হচ্ছে।

✅ localStorage থেকে ছবি লোড করা:

<img id="preview" alt="Saved preview" />

const savedImg = localStorage.getItem("myImage");
if (savedImg) {
  document.getElementById("preview").src = savedImg;
}

• কী? (What?) localStorage থেকে সংরক্ষিত Base64 স্ট্রিং নিয়ে একটি <img> ট্যাগের src-তে সেট করা হচ্ছে।
• কেন? (Why?) পেজটি পুনরায় লোড হওয়ার পর সংরক্ষিত ছবিটি দেখানোর জন্য।
• কীভাবে? (How?) localStorage.getItem() দিয়ে ডেটা এনে <img> এলিমেন্টের src অ্যাট্রিবিউটে বসিয়ে দিলেই ছবিটি দেখা যাবে।

✅ সারাংশ:

• blob: ইউআরএল পেজ রিফ্রেশ করার পর পুনরায় ব্যবহার করা যায় না।
• যদি আপনি ছবিটিকে পরে ব্যবহারের জন্য সেভ করতে চান, তবে সেটিকে Base64-তে রূপান্তর করুন।
• Base64 স্ট্রিং স্থায়ীভাবে কাজ করে এবং এটি localStorage-এ সংরক্ষণ করা যায়।