JavaScript में इमेज डेटा URL कैसे प्राप्त करें?

इमेज को डेटा URI में बदलना

HTML पेज टैग से इमेज को JavaScript का उपयोग करके डेटा URI में बदलने के लिए, आपको पहले एक कैनवास एलिमेंट बनाना होगा, इसकी चौड़ाई और ऊंचाई इमेज के बराबर सेट करनी होगी, उस पर इमेज ड्रा करनी होगी और अंत में इस पर toDataURL मेथड कॉल करना होगा।

यह इमेज का बेस64 एन्कोडेड डेटा URI लौटाएगा। उदाहरण के लिए, यदि आपके पास my-image आईडी वाली इमेज है, तो आप निम्न का उपयोग कर सकते हैं:

उदाहरण

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 प्रतिबंध: क्रॉस-ओरिजिन इमेजेज के लिए crossorigin="anonymous" विशेषता और सर्वर से Access-Control-Allow-Origin हेडर आवश्यक है।
• toDataURL('image/png') डिफ़ॉल्ट है, 'image/jpeg' क्वालिटी पैरामीटर स्वीकार करता है: toDataURL('image/jpeg', 0.9)
• बड़ी इमेजेज के लिए मेमोरी उपयोग पर ध्यान दें।
• ब्लॉब URL के लिए canvas.toBlob() उपयोग करें (अधिक मेमोरी-कुशल)।

ब्लॉब विकल्प

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // url उपयोग करें
}, 'image/jpeg', 0.9);