web-dev-qa-db-ja.com

JavaScriptを使用してbase64イメージをユーザーのディスクに保存する方法は？

JavaScriptを使用して、ソースコンテンツを<img> htmlタグからbase64Stringに変換しました。画像がはっきりと表示されました。次に、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>

<img> htmlタグのソースとして画像パスを設定すると、このコードはうまく機能しました。ただし、base64Stringが機能しないため、ソースを渡すと。

私が望むものを達成する方法は？

javascripthtmlimagebase64save
25
vengatesh

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

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

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

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

画像を動的にリクエストする場合、そのようなダウンロードをエミュレートすることができます。

画像が既に読み込まれていて、base64ソース：

saveBase64AsFile(base64, fileName) {

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

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

それ以外の場合、イメージファイルがBlobとしてダウンロードされる場合、FileReaderを使用してBase64に変換できます。

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

31
Andrii Verbytskyi

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

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

また、W3C準拠のブラウザーは、base64でエンコードされたバイナリデータを操作するための2つのメソッドを提供します。

おそらく、あなたはそれらをある意味で有用だと思うでしょう...

ここに、私があなたが必要と理解しているもののリファクタリングされたバージョンがあります：

window.addEventListener('DOMContentLoaded', () => {
  const img = document.getElementById('embedImage');
  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' +
    'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
    '9TXL0Y4OHwAAAABJRU5ErkJggg==';

  img.addEventListener('load', () => button.removeAttribute('disabled'));
  
  const button = document.getElementById('saveImage');
  button.addEventListener('click', () => {
    window.location.href = img.src.replace('image/png', 'image/octet-stream');
  });
});
<!DOCTYPE html>
<html>

<body>
  <img id="embedImage" alt="Red dot" />
  <button id="saveImage" disabled="disabled">save image</button>
</body>

</html>
22
John Doe