Guardando una image obstruida

Tengo una function que me permite pasar el contenido del file, el nombre y el tipo, y la function se saveá automáticamente. Funciona muy bien para documentos basados ​​en text, pero ahora estoy tratando de que guarde otros files, como un file de image. En algún momento a lo largo de la línea se corrompe y no está funcionando.

function write(text, filename, mime){ var file = new Blob([text], {type:mime}), a = document.createElement('a'); // Download in IE if(window.navigator.msSaveBlob) window.navigator.msSaveBlob(file, filename); // Download in compliant browsers else{ var url = URL.createObjectURL(file); a.href = url, a.download = filename; document.body.appendChild(a); a.click(); setTimeout(function(){ document.body.removeChild(a); window.URL.revokeObjectURL(url);}, 0);}} write('Plain text', 'demo.txt', 'text/plain'); write(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAIAAADkY5E+AAAAD0lEQVR42mNg0AthoDMGAE1BDruZMRqXAAAAAElFTkSuQmCC'), 'demo.png', 'image/png'); 

2 Solutions collect form web for “Guardando una image obstruida”

FileSaver.js un script js muy poderoso para save cualquier tipo de file blob.

Importarlo y luego usarlo así:

 saveAs(new Blob([file], {type:mime}),filename); 

¿Estás buscando el file usando ajax? si es así, debe establecer XmlHttpRequest.responseType en 'arraybuffer' o 'blob' (por defecto es '' y eso no funcionará con los binarys o los datos de blob).

Ejemplo de trabajo (usando arraybuffer) ( Fiddle ):

 var xhr = new XMLHttpRequest(); var url = 'http://img.javascriptes.com/javascript/Internet2.jpg'; xhr.responseType = 'arraybuffer'; //Set the response type to arraybuffer so xhr.response returns ArrayBuffer xhr.open('GET', url , true); xhr.onreadystatechange = function () { if (xhr.readyState == xhr.DONE) { //When request is done //xhr.response will be an ArrayBuffer var file = new Blob([xhr.response], {type:'image/jpeg'}); saveAs(file, 'image.jpeg'); } }; xhr.send(); //Request is sent 

Ejemplo de trabajo 2 (usando blob) ( Fiddle ):

 var xhr = new XMLHttpRequest(); var url = 'http://img.javascriptes.com/javascript/Internet2.jpg'; xhr.responseType = 'blob'; //Set the response type to blob so xhr.response returns a blob xhr.open('GET', url , true); xhr.onreadystatechange = function () { if (xhr.readyState == xhr.DONE) { //When request is done //xhr.response will be a Blob ready to save saveAs(xhr.response, 'image.jpeg'); } }; xhr.send(); //Request is sent 

Recomiendo FileSaver.js para save los blobs como files.

Enlaces útiles:

XmlHttpRequest Standard

XmlHttpRequest Standard (atributo responseType)

MDN Docs (XmlHttpRequest)

MDN Docs (ArrayBuffer)

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.