javascript - link - Blob de DataURL?

link href window url createobjecturl blob);

Question

Utilizando FileReader readAsDataURL() puedo transformar datos arbitrarios en una URL de datos. ¿Hay alguna manera de convertir una URL de datos de nuevo en una instancia de Blob utilizando las aplicaciones del navegador incorporado?

Answer 1

Dado que ninguna de estas respuestas es compatible con dataURL base64 y no base64, aquí hay una que se basa en la respuesta eliminada de vuamitom:

// from https://.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})
}
}

Nota: no estoy seguro de si hay otros tipos de mime de dataURL que podrían tener que manejarse de manera diferente. ¡Pero por favor avíseme si lo descubre! Es posible que los dataURL simplemente tengan cualquier formato que deseen, y en ese caso depende de usted encontrar el código correcto para su caso de uso particular.

Answer 2

El usuario Matt ha propuesto el siguiente código hace un año ( ¿Cómo convertir dataURL a un objeto de archivo en javascript? ) Que podría ayudarte

EDITAR: como informaron algunos comentaristas, BlobBuilder ha quedado obsoleto hace algún tiempo. Este es el código actualizado:

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

Answer 3

Método basado en 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 );
});

Answer 4

Me gusta el método @Adria pero con Fetch api y solo más pequeño [ caniuse? ]
No tiene que pensar en el tipo mimet ya que el tipo de respuesta blob simplemente funciona de la caja

Advertencia: puede violar la Política de seguridad de contenido (CSP)
... si usas esas cosas

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

No creas que podrías hacerlo más pequeño que esto sin usar lib

Answer 5

Usa mi código para convertir dataURI a blob. Es más simple y más limpio que otros.

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

Answer 6

tratar:

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

Answer 7

utilizar

FileReader.readAsArrayBuffer(Blob|File)

más bien que

FileReader.readAsDataURL(Blob|File)

Answer 8

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 es Data URL y dataTYPE es el tipo de archivo y luego output blob object