web-dev-qa-db-ja.com

base64でエンコードされたイメージをダウンロードする方法

JavaScriptを介して強制的にダウンロードしたいサーバーからのbase64エンコード画像があります。可能ですか？

javascripthtmlimagebase64
17
Mario

JavaScriptを使用して（バックエンドなしで）ダウンロードしたい場合は、以下を使用します。

window.location.href = 'data:application/octet-stream;base64,' + img;

ここで、imgはbase64でエンコードされたイメージです。

ユーザーがファイル名を指定できるようにする場合は、downloadタグのa属性を使用します。

<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
  • 注意：ダウンロード属性は広くサポートされていません。
19
Minko Gechev

Chromeが全画面のスクリーンショットを撮る方法のソースコードからこの解決策を見つけました。

const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = pageImage.naturalWidth;
    canvas.height= pageImage.naturalHeight;

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(pageImage, 0, 0);
    console.log(canvas, pageImage)
    saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
    let fileName = "image"
    const link = document.createElement('a');
    link.download = fileName + '.png';
    console.log(canvas)
    canvas.toBlob(function(blob) {
        console.log(blob)
        link.href = URL.createObjectURL(blob);
        link.click();
    });
};
5
Sentient

JavaScriptでこれを行う簡単な方法...

    var a = document.createElement("a"); //Create <a>
    a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
    a.download = "Image.png"; //File name Here
    a.click(); //Downloaded file
3
J Code

Base64に既にある場合は、base64の前にイメージタグを追加します。要素に添付します

png64 = "data:image/" + png64; 
$('#downloadPNG').attr('href', png64);

ダウンロード時に必要なファイル名をdownloadタグに追加します。

<a download="chart.png" id="downloadPNG">Export img</a>
2
cweitat

以下の関数を使用するだけでとても簡単です。

// Parameters:
// contentType: The content type of your file. 
//              its like application/pdf or application/msword or image/jpeg or
//              image/png and so on
// base64Data: Its your actual base64 data
// fileName: Its the file name of the file which will be downloaded. 

function downloadBase64File(contentType, base64Data, fileName) {
     const linkSource = `data:${contentType};base64,${base64Data}`;
     const downloadLink = document.createElement("a");
     downloadLink.href = linkSource;
     downloadLink.download = fileName;
     downloadLink.click();
}
2
Ehsan Ahmadi

あなたはこれを試すことができます：

    <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Download Text File DataURL Demo</title>
        <style>
            body{ font: menu; }
        </style>
        <script src='//js.zapjs.com/js/download.js'></script>
    </head>
    <body>
        <h1>Download Text File DataURL Demo</h1>
        <main></main>
        <script>
            download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
        </script>
    </body>

</html>

ダウンロードタグは、含まれているスクリプトを使用して画像をダウンロードします。

参考のために、次のURLを試すことができます。 http://danml.com/download.html

1
RxJS
    var a = document.createElement("a"); //Create <a>
    a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
    a.download = "Image.png"; //File name Here
    a.click(); //Downloaded file
0
jayant karmakar

私のReactアプリでは、APIからベース64の画像を取得していました。グローバルプロップに保存し、<a>タグを使用してダウンロードしました。

<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
0
Piyush Thawakar

まず、この質問はブラウザに依存しています。私は多くを試したので、この質問にそのように答えるように思い付きました：

IMG要素のsrc-Tag内にbase64-Dataを配置する必要があります： Base64画像をHTMLで表示する方法？ 次に、画像を右クリックして[画像を保存...]をクリックします（または同様）これらのブラウザで：

  • Chrome 79
  • エッジ44
  • Firefox 71
  • IE 11
  • Safari 13

また、Android with Chrome and Firefox。動作する最大ファイルは23MBのPNGファイルでしたIE 11およびSafari 13 。しかし、FirefoxとChrome=は86 MB JPEGでも機能しました。

0
Sebastian