JavaScript के साथ इमेज को Data 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