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 Blob
instancji przy użyciu wbudowanego interfejsu API przeglądarki?
javascript
fileapi
Shane Holloway
źródło
źródło
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
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
źródło
const blob = await (await fetch(url)).blob();
fetch
że wymuszenie asynchronicznego interfejsu API.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
źródło
dataTYPE
Jest osadzony wdataURI
, a zatem powinien być analizowany, jak w pierwszej odpowiedzi.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 ); });
źródło
W nowoczesnych przeglądarkach można skorzystać z jednej linijki zaproponowanej przez Christiana d'Heureuse w komentarzu:
const blob = await (await fetch(dataURI)).blob();
źródło
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 }); }
źródło
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 ); });
źródło
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}); }
źródło
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.
źródło
posługiwać się
zamiast
źródło
ArrayBuffer
ścieżki nie zadziała.