Blob dari DataURL?

Menggunakan FileReaderIni readAsDataURL()saya dapat mengubah data sewenang-wenang menjadi URL Data. Apakah ada cara untuk mengubah URL Data kembali menjadi sebuah Blobinstance menggunakan apis browser bawaan?

Pengguna Matt telah mengusulkan kode berikut setahun yang lalu ( Bagaimana cara mengonversi dataURL ke objek file dalam javascript? ) Yang dapat membantu Anda

EDIT: Seperti yang dilaporkan beberapa komentator, BlobBuilder sudah tidak digunakan lagi beberapa waktu lalu. Ini adalah kode yang diperbarui:

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;

}

Suka metode @Adria tetapi dengan Fetch api dan [ caniuse? ]
Tidak perlu memikirkan mimetype karena jenis respons blob langsung bekerja di luar kotak

Peringatan: Dapat melanggar Content Security Policy (CSP)
... jika Anda menggunakan barang itu

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

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

Jangan berpikir Anda bisa melakukannya lebih kecil dari ini tanpa menggunakan lib's

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 adalah Data URL dan dataTYPE adalah jenis file dan kemudian objek blob output

Metode berbasis 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 );
});

Di peramban modern, seseorang dapat menggunakan satu baris yang disarankan oleh Christian d'Heureuse dalam komentar:

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

mencoba:

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
    });
}

Buat blob menggunakan 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 );
});

Gunakan kode saya, ubah dataURI ke blob. Ini lebih sederhana dan lebih bersih dari yang lain.

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

Karena tidak satu pun dari jawaban ini yang mendukung dataURL base64 dan non-base64, berikut adalah salah satu yang mendukung jawaban vuamitom yang dihapus:

// 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})
    }
}

Catatan: Saya tidak yakin apakah ada jenis mime dataURL lain yang mungkin harus ditangani secara berbeda. Tapi tolong beri tahu saya jika Anda mengetahuinya! Mungkin saja dataURL dapat memiliki format apa pun yang diinginkan, dan dalam hal ini terserah Anda untuk menemukan kode yang tepat untuk kasus penggunaan khusus Anda.

menggunakan

FileReader.readAsArrayBuffer(Blob|File)

daripada

FileReader.readAsDataURL(Blob|File)