私はあなたに難しい質問があります、私はしばらくの間苦労しています。
ローカルストレージには5 MBの制限があるため、ローカルストレージなしでユーザーのコンピューターにファイルを保存できるソリューションを探しています。 「ファイルに保存」ダイアログが必要ですが、保存したいデータはJavaScriptでしか利用できません。サーバーにデータを送り返さないようにしたいのですが、もう一度送信します。
使用例は、現在取り組んでいるサービスがユーザーデータの圧縮および暗号化されたチャンクを保存しているため、サーバーはそれらのチャンクの内容を把握しておらず、データをサーバーに送信することにより、4倍のトラフィックとサーバーは暗号化されていないデータを受信しているため、暗号化全体が役に立たなくなります。
「ファイルに保存」ダイアログでユーザーのコンピューターにデータを保存するJavaScript関数を見つけましたが、この作業は中止されており、完全にはサポートされていません。それはこれです: http://www.w3.org/TR/file-writer-api/
それで、window.saveAsがないので、すべてをサーバーに送信せずにBlobオブジェクトからデータを保存する方法は何ですか?
ヒント、何を検索すればよいか教えてください。
MEGAがそれをやっているので、私はこれがうまくいくことを知っています、しかし私は自分自身の解決策が欲しいです:)
あなたの最良のオプションは、ブロブ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
_
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キャンバスシーケンスをビデオファイルに変換します
以下も参照してください。