イメージブロブを保存する

Question

私はファイルの内容、名前、タイプを渡すことができる関数を持っています。関数は自動的にそれを保存します。テキストベースのドキュメントではうまくいきますが、イメージファイルのように他のファイルを保存しようとしています。ラインのどこかに壊れていて、動かない。

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

Answer 1

FileSaver.js BLOBファイルのいずれかのタイプを保存するための非常に強力なjsのスクリプト。

インポート、それはそのようにそれを使用します。

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

Answer 2

あなたは、Ajaxを使用してファイルを取得していますか？その場合は、 XmlHttpRequest.responseTypeから'arraybuffer'または'blob'（デフォルトは''で、バイナリまたはBLOBデータでは機能しません）を設定する必要があります。

（arraybufferを使用して）、実施例（Fiddle）：（Fiddle）（BLOBを使用して）

var xhr = new XMLHttpRequest(); 

var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/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 

実施例2：

var xhr = new XMLHttpRequest(); 

var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/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 

私はファイルとしてブロブを保存するためにFileSaver.jsをお勧めします。

便利なリンク：

XmlHttpRequest Standard

XmlHttpRequest Standard (responseType attribute)

MDN Docs (XmlHttpRequest)

MDN Docs (ArrayBuffer)