जावास्क्रिप्ट का उपयोग करके इमेज को Base64 डेटा URL में बदलना

HTML पेज पर मौजूद किसी इमेज टैग को जावास्क्रिप्ट की मदद से डेटा 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

नोट: यह तरीका क्रॉस-ओरिजिन इमेज के लिए काम नहीं करेगा जब तक कि सर्वर उचित CORS हेडर्स के साथ इमेज सर्व न करे। साथ ही, toDataURL() का डिफॉल्ट फॉर्मेट image/png होता है, लेकिन आप image/jpeg या image/webp भी बता सकते हैं।