web-dev-qa-db-ja.com

Blobからローカルファイルに保存

私はあなたに難しい質問があります、私はしばらくの間苦労しています。

ローカルストレージには5 MBの制限があるため、ローカルストレージなしでユーザーのコンピューターにファイルを保存できるソリューションを探しています。 「ファイルに保存」ダイアログが必要ですが、保存したいデータはJavaScriptでしか利用できません。サーバーにデータを送り返さないようにしたいのですが、もう一度送信します。

使用例は、現在取り組んでいるサービスがユーザーデータの圧縮および暗号化されたチャンクを保存しているため、サーバーはそれらのチャンクの内容を把握しておらず、データをサーバーに送信することにより、4倍のトラフィックとサーバーは暗号化されていないデータを受信して​​いるため、暗号化全体が役に立たなくなります。

「ファイルに保存」ダイアログでユーザーのコンピューターにデータを保存するJavaScript関数を見つけましたが、この作業は中止されており、完全にはサポートされていません。それはこれです： http://www.w3.org/TR/file-writer-api/

それで、window.saveAsがないので、すべてをサーバーに送信せずにBlobオブジェクトからデータを保存する方法は何ですか？

ヒント、何を検索すればよいか教えてください。

MEGAがそれをやっているので、私はこれがうまくいくことを知っています、しかし私は自分自身の解決策が欲しいです:)

javascriptdownloadblobclient-side
21
fsx_steven

あなたの最良のオプションは、ブロブURL（ブラウザのメモリ内のオブジェクトを指す特別なURLです）を使用することです：

_var myBlob = ...;
var blobUrl = URL.createObjectURL(myBlob);
_

これで、このURL（window.location.replace(blobUrl)）にリダイレクトするか、リンクを作成するかを選択できます。 2番目のソリューションでは、デフォルトのファイル名を指定できます。

_var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blobUrl;
link.download = "aDefaultFileName.txt";
link.innerHTML = "Click here to download the file";
document.body.appendChild(link); // Or append it whereever you want
_
22
Sebastien C.

FileSaver.jsは、それを持たない特定のブラウザーのためにsaveAsを実装します

https://github.com/eligrey/FileSaver.js

FileSaver.js 1.3.8でテスト済みChromium 75とFirefox 68でテスト済み。どちらにもsaveAsがありません。

動作原理は、 <a要素を（= /// =）作成し、JavaScriptでそれをクリックすることです ああWebの恐怖。

以下は、canvas.toBlobで生成されたblobを、選択した名前mypng.pngでダウンロードフォルダーに保存するデモです。

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;

function draw() {
    console.log("draw");
    for (x = 0; x < canvas.width; x += pixel_size) {
        for (y = 0; y < canvas.height; y += pixel_size) {
            var b = 0.5;
            ctx.fillStyle =
                "rgba(" +
                (x / canvas.width) * 255 + "," +
                (y / canvas.height) * 255 + "," +
                b * 255 +
                ",255)"
            ;
            ctx.fillRect(x, y, pixel_size, pixel_size);
        }
    }
    canvas.toBlob(function(blob) {
      saveAs(blob, 'mypng.png');
    });
}
window.requestAnimationFrame(draw);
<canvas id="my-canvas" width="512" height="512" style="border:1px solid black;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

複数の画像をダウンロードするアニメーションバージョンは次のとおりです： HTML5キャンバスシーケンスをビデオファイルに変換します

以下も参照してください。

1
Ciro Santilli 新疆改造中心法轮功六四事件