javascriptを使用してユーザーのディスクに画像を保存

javascriptを使用してbase64StringとしてHTMLタグのソースを渡しました。画像がはっきりと表示されました。今私はjavascriptを使用してユーザーのディスクにそのイメージを保存したい。私たちは、タグのソースとしてのImagePathを渡すときjavascriptを使用してユーザーのディスクに画像を保存

<html> 
<head> 
<script> 
function saveImageAs() { 
var imgOrURL; 
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ 
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ 
"9TXL0Y4OHwAAAABJRU5ErkJggg=="; 
imgOrURL = embedImage; 
if (typeof imgOrURL == 'object') 
    imgOrURL = embedImage.src; 
window.win = open(imgOrURL); 
setTimeout('win.document.execCommand("SaveAs")', 0); 
} 
</script> 
</head> 
<body> 
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> 

    <img id="embedImage" alt="Red dot"> 

</body> 
</html>

このコードは、私たちがタグ付けするbase64Stringとしてsorceを渡すときしかし、それは働いていなかった、働いていました。

この問題について私にお伝えください。

ありがとうございます。

出典

2011-10-31 vengatesh

私はデータの使用について制限があることを知っています：IEのイメージ...ファイルサイズなど。前にそれを見てみてください。 – Fabio

制限がある場合は、画面に表示されるべきではありません。長い画像の場合でも画像が表示されます。私はそのイメージのtomディスクを保存することができませんでした。 – vengatesh

私はタグのソースとしてbytearrayをjavascriptを使って渡すことができますか？ – vengatesh

ユーザーが画像やその他のファイルをダウンロードできるようにするには、HTML5 download属性を使用します。

静的ファイルのダウンロード

<a href="/images/image-name.jpg" download> 
<!-- OR --> 
<a href="/images/image-name.jpg" download="new-image-name.jpg">

動的なファイルのダウンロードには、このようなダウンロードをエミュレートすることが可能である動的イメージを要求する場合には

。

あなたのイメージがすでにロードされている場合、あなたはその後、base64ソースがあります：イメージファイルがBlobとしてダウンロードされた場合にそれ以外の場合は

saveBase64AsFile(base64, fileName) { 

    var link = document.createElement("a"); 

    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
}

を、あなたは、Base64に変換するFileReaderを使用することができます。

saveBlobAsFile(blob, fileName) { 

    var reader = new FileReader(); 

    reader.onloadend = function() {  
     var base64 = reader.result ; 
     var link = document.createElement("a"); 

     link.setAttribute("href", base64); 
     link.setAttribute("download", fileName); 
     link.click(); 
    }; 

    reader.readAsDataURL(blob); 
}

悪いニュース！ IEはサポートされていません：Caniuse link

出典

2016-05-30 08:43:37

Safariがサポートされました。 – Alex78191

JavaScriptでは、ファイルシステムに直接アクセスすることはできません。しかし、ブラウザを作成してダイアログウィンドウをポップアップして、ユーザーが保存場所を選択できるようにすることができます。これを行うためには、あなたのBase64Stringでreplaceメソッドを使用して"image/png""image/octet-stream"と交換してください：

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

また、W3C準拠のブラウザがで動作するように2つの方法を提供base64エンコードバイナリデータ：

おそらく、あなたはここで

は、私はあなたが必要と理解して何のリファクタリング版です...方法でそれらを有用見つける：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var img = document.getElementById('embedImage'); 
       var button = document.getElementById('saveImage'); 
       img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
       'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
       '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
       img.onload = function() { 
        button.removeAttribute('disabled'); 
       }; 
       button.onclick = function() { 
        window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <img id="embedImage" alt="Red dot"/> 
     <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
    </body> 
</html>

あなたは、アクションHEREでそれを見ることができます。

出典

2011-10-31 10:25:46

'atob'と' btoa'は決して標準の一部ではありませんでした。 *いくつかの標準に準拠したブラウザでサポートされていますが、すべてのブラウザに対応しているとは限りません。 –

@AndyE Correct。そのため、これらの方法を使用する前に機能テストを実行する必要があります。 –

@ John Doe：まだ画像をユーザーのディスクに保存するための保存ダイアログボックスが表示されませんでした。 – vengatesh

javascriptを使用してユーザーのディスクに画像を保存

答えて

関連する問題