Blob de DataURL?
en utilisant FileReader
's readAsDataURL()
je peux transformer des données arbitraires en une URL de données. Existe-t-il un moyen de convertir une URL de données en une instance Blob
en utilisant un API de navigateur intégré?
8 réponses
L'utilisateur Matt a proposé le code suivant il y a un an ( comment convertir dataURL en fichier objet en javascript? ) qui pourrait vous aider
EDIT: comme certains commentateurs l'ont rapporté, BlobBuilder a été déprécié il y a quelque temps. C'est le code mis à jour:
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;
}
Comme @Adria méthode, mais Chercher l'api et à peine plus petits [ caniuse? ]
Ne pas avoir à penser à mimetype depuis blob type de réponse fonctionne juste de la boîte
Avertissement: Peut-il violer le Contenu de la Politique de Sécurité (CSP)
...si vous utilisez cette substance
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))
ne pensez pas que vous pourriez le faire plus petit puis ceci sans utiliser 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});
}
dataauri d'entrée est L'URL de données et le type de données est le type de fichier, puis la sortie objet blob
méthode basée sur 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 );
});
, essayez:
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
});
}
utilisez mon code convertissez dataURI en blob. C'est plus simple et plus propre que les autres.
function dataURItoBlob(dataURI) {
var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
return new Blob([atob(arr[1])], {type:mime});
}
comme aucune de ces réponses ne supporte les données base64 et non-base64, voici une réponse basée sur la réponse supprimée de vuamitom:
// from https://stackoverflow.com/questions/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})
}
}
Note: Je ne suis pas sûr qu'il y ait des types mime autres qui pourraient devoir être traités différemment. Mais s'il vous plaît laissez-moi savoir si vous le trouvez! Il est possible que dataURLs puisse simplement avoir n'importe quel format qu'ils veulent, et dans ce cas, ce serait à vous de trouver le bon code pour votre usage particulier cas.
utiliser
FileReader.readAsArrayBuffer(Blob|File)
plutôt que
FileReader.readAsDataURL(Blob|File)