DataURL से बूँद?

Question 1

का उपयोग करते हुए FileReader's readAsDataURL()मैं एक डाटा URL में मनमाने ढंग से डेटा बदल सकता है। क्या Blobबिल्ट ब्राउज़र एपिस का उपयोग करके किसी डेटा URL को इंस्टेंस में वापस बदलने का कोई तरीका है ?

Question 2

उपयोगकर्ता मैट ने एक वर्ष पहले निम्नलिखित कोड का प्रस्ताव दिया है ( जावास्क्रिप्ट में ऑब्जेक्ट को फ़ाइल करने के लिए डेटाURL कैसे परिवर्तित करें? ) जो आपकी मदद कर सकता है ?

EDIT: जैसा कि कुछ टिप्पणीकारों ने बताया है, कुछ समय पहले ब्लबब्यूलर को हटा दिया गया है। यह अपडेटेड कोड है:

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

Question 3

@ एड्रिया विधि की तरह, लेकिन लेश एपीआई के साथ और सिर्फ छोटा [ कैनिअस? ]
Mimetype के बारे में सोचने की ज़रूरत नहीं है क्योंकि बूँद प्रतिक्रिया प्रकार बस बॉक्स से बाहर काम करता है

चेतावनी:
यदि आप उस सामग्री का उपयोग करते हैं तो सामग्री सुरक्षा नीति (CSP) का उल्लंघन कर सकते हैं

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

स्निपेट का विस्तार करें

लगता है कि आप इसे किसी भी छोटे कर सकते हैं तो यह काम का उपयोग किए बिना

Question 4

dataURItoBlob : function(dataURI, dataTYPE) {
        var binary = atob(dataURI.split(',')[1]), array = [];
        for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], {type: dataTYPE});
    }

input dataURI डेटा URL है और dataTYPE फ़ाइल प्रकार और फिर आउटपुट बूँद ऑब्जेक्ट है

Question 5

XHR आधारित पद्धति।

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752

    req.onload = function fileLoaded(e)
    {
        // If you require the blob to have correct mime type
        var mime = this.getResponseHeader('content-type');

        callback( new Blob([this.response], {type:mime}) );
    };

    req.send();
}

dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
    console.log( blob );
});

Question 6

में आधुनिक ब्राउज़रों एक एक टिप्पणी में एक लाइनर ईसाई डी Heureuse ने सुझाव दिया उपयोग कर सकते हैं:

const blob = await (await fetch(dataURI)).blob();

Question 7

प्रयत्न:

function dataURItoBlob(dataURI) {
    if(typeof dataURI !== 'string'){
        throw new Error('Invalid argument: dataURI must be a string');
    }
    dataURI = dataURI.split(',');
    var type = dataURI[0].split(':')[1].split(';')[0],
        byteString = atob(dataURI[1]),
        byteStringLength = byteString.length,
        arrayBuffer = new ArrayBuffer(byteStringLength),
        intArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteStringLength; i++) {
        intArray[i] = byteString.charCodeAt(i);
    }
    return new Blob([intArray], {
        type: type
    });
}

Question 8

XHR API का उपयोग करके एक बूँद बनाएँ :

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'blob';

    req.onload = function fileLoaded(e)
    {
        callback(this.response);
    };

    req.send();
}

var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

dataURLtoBlob(dataURI , function( blob )
{
    console.log( blob );
});

स्निपेट का विस्तार करें

Question 9

मेरे कोड का उपयोग करें dataURI को ब्लॉब में बदलें। यह दूसरों की तुलना में सरल और साफ है।

function dataURItoBlob(dataURI) {
    var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
    return new Blob([atob(arr[1])], {type:mime});
}

Question 10

चूँकि इनमें से कोई भी उत्तर आधार 64 और गैर-आधार64 डेटाअरल का समर्थन नहीं करता है, यहाँ एक है जो vuamitom के हटाए गए उत्तर पर आधारित है:

// from /programming/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/
var dataURLtoBlob = exports.dataURLtoBlob = function(dataurl) {
    var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1]
    if(parts[0].indexOf('base64') !== -1) {
        var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
        while(n--){
            u8arr[n] = bstr.charCodeAt(n)
        }

        return new Blob([u8arr], {type:mime})
    } else {
        var raw = decodeURIComponent(parts[1])
        return new Blob([raw], {type: mime})
    }
}

ध्यान दें: मुझे यकीन नहीं है कि अगर अन्य dataURL माइम प्रकार हैं जिन्हें अलग तरीके से संभाला जा सकता है। लेकिन कृपया मुझे बताएं कि क्या आपको पता है! यह संभव है कि डेटायूएल के पास कोई भी प्रारूप हो जो वे चाहते हैं, और उस स्थिति में यह आपके विशेष उपयोग के मामले के लिए सही कोड खोजने के लिए आपके ऊपर होगा।

Question 11

उपयोग

FileReader.readAsArrayBuffer(Blob|File)

बजाय

FileReader.readAsDataURL(Blob|File)