कई दृष्टिकोण हैं जिन्हें आप चुन सकते हैं:
1. दृष्टिकोण: FileReader
के माध्यम से ब्लॉब के रूप में छवि लोड XMLHttpRequest और प्रयोग FileReader एपीआई यह एक में बदलने के लिए dataURL :
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
console.log('RESULT:', dataUrl)
})
इस कोड उदाहरण को WHATWG भ्रूण API का उपयोग करके भी लागू किया जा सकता है :
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
.then(dataUrl => {
console.log('RESULT:', dataUrl)
})
ये दृष्टिकोण:
- ब्राउज़र समर्थन में कमी
- बेहतर संपीड़न है
- अन्य फ़ाइल प्रकारों के लिए भी काम करते हैं
ब्राउज़र समर्थन:
2. दृष्टिकोण: कैनवास
छवि को एक छवि-ऑब्जेक्ट में लोड करें, इसे एक गैर-प्राप्त कैनवास पर पेंट करें और कैनवास को वापस डेटाूर में परिवर्तित करें।
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
toDataURL(
'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
function(dataUrl) {
console.log('RESULT:', dataUrl)
}
)
विस्तार से
समर्थित इनपुट प्रारूप:
image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp,image/xxx
समर्थित आउटपुट स्वरूप:
image/png, image/jpeg, image/webp(क्रोम)
ब्राउज़र समर्थन:
3. दृष्टिकोण: स्थानीय फ़ाइल सिस्टम से छवियाँ
यदि आप उपयोगकर्ताओं को फ़ाइल सिस्टम से छवियों को परिवर्तित करना चाहते हैं, तो आपको एक अलग दृष्टिकोण लेने की आवश्यकता है। FileReader API का उपयोग करें :
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />