Blob z DataURL?

92

Używając FileReader's readAsDataURL()mogę przekształcić dowolne dane w adres URL danych. Czy istnieje sposób na konwersję adresu URL danych z powrotem do Blobinstancji przy użyciu wbudowanego interfejsu API przeglądarki?

Shane Holloway
źródło

Odpowiedzi:

151

Użytkownik Matt zaproponował rok temu następujący kod ( Jak przekonwertować dataURL na obiekt pliku w javascript? ), Który może ci pomóc

EDYCJA: Jak zgłaszali niektórzy komentatorzy, BlobBuilder został wycofany jakiś czas temu. Oto zaktualizowany kod:

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;

}
devnull69
źródło
4
Zduplikowany podział wydaje się trochę marnotrawny, biorąc pod uwagę, że może to być bardzo duży ciąg.
Jesse Crossen
2
Jaka jest rola zmiennej „ia” - ma przypisaną wartość, ale nigdy nie jest używana do tworzenia obiektu blob. Czemu?
Blaze
1
Blaze, Ward: m.in. to widok na bufor. Więc kiedy ustawiasz każdy bajt między innymi, zapisuje on do bufora. Bez pętli między innymi bufor będzie całkowicie pusty.
Mat
1
Jak znaleźć odpowiedź SO # 6850276?
BT,
1
@BT: Myślę, że stackoverflow.com/a/30407840/271577 jest przeznaczony (pamiętaj, że przekierowany adres URL zawiera „# 6850276”).
Brett Zamir
50

Podobnie jak metoda @Adria, ale z api Fetch i tylko mniejszym [ caniuse? ]
Nie musisz myśleć o typie MIME, ponieważ typ odpowiedzi blob działa po prostu po wyjęciu z pudełka

Ostrzeżenie: może naruszyć politykę bezpieczeństwa treści (CSP)
... jeśli używasz tych rzeczy

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

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

Nie myśl, że mógłbyś zrobić to mniejszy niż to bez użycia bibliotek

Nieskończony
źródło
1
Bardzo elegancko. Niestety edge 13 i safari nie obsługują "pobierania".
alex_1948511,
2
Jest obsługiwany w krawędzi 14 i Safari 10.1
Endless
19
Wersja async:const blob = await (await fetch(url)).blob();
Christian d'Heureuse
Działa świetnie, ale plik nie ma rozszerzenia podczas odczytu z serwera. jakieś pomysły?
pauljeba
1
Większy problem polega na tym, fetchże wymuszenie asynchronicznego interfejsu API.
Dennis C
19
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 to adres URL danych, a dataTYPE to typ pliku, a następnie wyjściowy obiekt blob

Shawn Wu
źródło
1
dataTYPEJest osadzony w dataURI, a zatem powinien być analizowany, jak w pierwszej odpowiedzi.
Noel Abrahams
dataURL2Blob pochodzi z mojej wtyczki do przetwarzania obrazu, możesz sprawdzić ten link. Po prostu kopiuję swój własny kod. github.com/xenophon566/html5.upload/blob/master/js/…
Shawn Wu
12

Metoda oparta na 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 );
});
Adria
źródło
Wydaje się, że teraz jest to najlepszy sposób. Dziękuję Ci!
dizel3d
Nie będzie działać w Safari - jeśli strona zostanie załadowana z HTTPS, wyświetli błąd cross-origin.
Martin Ždila,
Pytanie brzmi: Blob z DataURL?
Michał
6

W nowoczesnych przeglądarkach można skorzystać z jednej linijki zaproponowanej przez Christiana d'Heureuse w komentarzu:

const blob = await (await fetch(dataURI)).blob(); 
Jan Derk
źródło
3

próbować:

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
    });
}
HaNdTriX
źródło
2

Utwórz obiekt blob za pomocą interfejsu API XHR :

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

georgeawg
źródło
0

Użyj mojego kodu, aby przekonwertować dataURI na obiekt BLOB. Jest prostszy i czystszy niż inne.

function dataURItoBlob(dataURI) {
    var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
    return new Blob([atob(arr[1])], {type:mime});
}
cuixiping
źródło
Czy możesz wyjaśnić, dlaczego Twój kod nie wymaga konwersji na tablicę int, podczas gdy wszyscy inni to robią?
Ameen
Zobacz konstruktor Blob () na MDN
cuixiping
@Rikard co masz na myśli? to nie wpływa na żaden obraz
cuixiping
2
Działa to tylko w przypadku niektórych podstawowych rzeczy. Najpierw musisz uciec + decodeURIComponent, aby obsługiwać większość kodowania treści, czytaj to . Dlatego inni konwertują ciąg na tablicę int, aby uniknąć powolnego / głodnego wywołania funkcji decodeURIComponent / atob i konwertuj bezpośrednio na bajty
Endless
0

Ponieważ żadna z tych odpowiedzi nie obsługuje adresów URL danych base64 i non-base64, oto odpowiedź oparta na usuniętej odpowiedzi 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})
    }
}

Uwaga: nie jestem pewien, czy istnieją inne typy MIME dataURL, które mogą wymagać innej obsługi. Ale daj mi znać, jeśli się dowiesz! Możliwe, że dataURL może mieć po prostu dowolny format, w takim przypadku do Ciebie należałoby znalezienie odpowiedniego kodu dla konkretnego przypadku użycia.

BT
źródło
-2

posługiwać się

FileReader.readAsArrayBuffer(Blob|File)

zamiast

FileReader.readAsDataURL(Blob|File)
3on
źródło
2
Muszę przechowywać go jako DataURL przez czas nieokreślony w localStorage, więc użycie alternatywnej ArrayBufferścieżki nie zadziała.
Shane Holloway