[解決済み] ブラウザ/HTML src="data:image/jpeg;base64..." から画像を強制ダウンロードする。

質問

クライアント側で画像を生成し、それを以下のようなHTMLで表示しています。

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>

生成された画像をダウンロードできるようにしたい。

ブラウザがファイル保存ダイアログを開いていること（またはクロームやファイヤフォックスのようにダウンロードフォルダに画像をダウンロードすること）をどのように実現すれば、ユーザが画像を保存できるようになりますか？ 右クリックや名前を付けて保存することなく をすることなく、画像を保存することができます。

私は、サーバーとのインタラクションがないソリューションを希望します。ですから、私が最初に画像をアップロードし、その後ダウンロードを開始した場合、それが可能であることを認識しています。

どうもありがとうございます。

どのように解決するのですか？

単純に image/jpeg を application/octet-stream . クライアントはこの URL をインライン化できるリソースとして認識せず、ダウンロードのダイアログを表示します。

シンプルな JavaScript の解決策は次のとおりです。

//var img = reference to image
var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element, 

別の方法として blob: URIを使用することです。

var img = document.images[0];
img.onclick = function() {
    // atob to base64_decode the data-URI
    var image_data = atob(img.src.split(',')[1]);
    // Use typed arrays to convert the binary data to a Blob
    var arraybuffer = new ArrayBuffer(image_data.length);
    var view = new Uint8Array(arraybuffer);
    for (var i=0; i<image_data.length; i++) {
        view[i] = image_data.charCodeAt(i) & 0xff;
    }
    try {
        // This is the recommended method:
        var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
        bb.append(arraybuffer);
        var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob
    }

    // Use the URL object to create a temporary URL
    var url = (window.webkitURL || window.URL).createObjectURL(blob);
    location.href = url; // <-- Download!
};

関連ドキュメント

• atob
• 型付き配列
• URL.createObjectURL
• Blob そして BlobBuilder