1

画像ファイルを (Wikimedia Commons から) 取得し、ローカルに保存してから表示するためのコードを少し書いてみました。ここに私のコード：

<!DOCTYPE html> 
<html> 
<head>
<script>

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

function onError(e) {
  console.log('Error', e);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://upload.wikimedia.org/wikipedia/fr/2/26/10_francs_Mathieu_1987_F365-28_revers.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {

window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {alert(fs.root.name);}, onError);

  window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
    fs.root.getFile('image.jpg', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {

        writer.onwrite = function(e) {};
        writer.onerror = function(e) {};

        var blob = new Blob([xhr.response], {type: 'image/jpeg'});

        writer.write(blob);

      }, onError);
    }, onError);
  }, onError);

  window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
    fs.root.getFile('image.jpg', {create: false}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(event) {
                var img = document.createElement("img");
                img.src = event.target.result;

                document.body.parentNode.insertBefore(img, document.body.nextSibling);
            };
            reader.readAsDataURL(file);
        }, onError);
    }, onError);
  }, onError);

};

xhr.send();
</script>
</head> 
<body>

</body>
</html>

何も表示されません。Chrome のコンソールにはエラー メッセージが表示されないため、動作していない理由がわかりません。どんな手掛かり？

編集 ：

次のパラメータを使用して Google Chrome を起動しても、QUOTA_EXCEEDED_ERR を意味する FileError コード 10 が実際に発生するのを見たところです。

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --unlimited-quota-for-files

実際、--unlimited-quota-for-filesパラメーターの有無にかかわらず同じエラーが発生しますが、これは奇妙です。しかし、ファイルエラー2が表示されません--allow-file-access-from-files

4

3 に答える 3

1

「--unlimited-quota-for-files」での起動が機能しない理由についての質問への回答として、2 つの異なることを混同していると思います。このパラメーターは、クォータ制限を削除しただけであり、許可なくサンドボックス内のスペースを奪うスクリプトを自動的に事前承認するわけではありません。「一時的な」ファイルシステムリクエストを使用していた場合、プロンプトなしで割り当てられます（回答の最後にあるリンクを参照）。

ただし、requestQuota() メソッドを呼び出す必要があることで経験したように、Chrome では明示的なユーザー許可なしに永続的なファイル システム ストレージの割り当てを許可しません。これにはいくつかの理由がありますが、セキュリティが最善です。つまり、Chrome が永続的なファイル システム ストレージをオンデマンドで (ユーザーの知らないうちに) 要求したスクリプトに割り当てると、悪意のあるスクリプトがユーザーのストレージを簡単にいっぱいにしてしまう可能性があります。ハード ドライブ、何千ものオブジェクトが原因で Chrome メモリがクラッシュし、一般的な混乱を引き起こします。このような脆弱性は、メモリをそのように叩くことによって、バッファ オーバーフローを引き起こす可能性もあります。

結論: Chrome では、ユーザーの承認を得た永続的なファイル システム ストレージのみが許可されます。Google の詳細: HTML5 オフライン ストレージの管理:永続ストレージ

于 2013-08-23T00:10:17.410 に答える
1

誰かがこれに出くわした場合、--unlimited-quota-for-filesはもはや有効なフラグではありません。ただし、ここに保持されている現在のクロム フラグのリストがあります。

--unlimited-storage実行する新しいフラグになると思います。

オリジンごとのクォータ設定をオーバーライドして、任意のアプリ/オリジンの無制限のストレージにします。これは、テスト目的でのみ使用してください。

フラグは何もオーバーライドしなかったため、割り当て要求を更新する必要があったと思います (ただし、フラグ自体がいつ非推奨になったかは実際にはわかりません)。以前のように機能しなかったため（コードが以前に機能していたか、チュートリアルから取得したと仮定）、オーバーライドが発生せず、クォータを超えたことを確認したときに、ブラウザがクォータ システムにフォールバックしたと思いますあなたがしていたことで、例外をスローしました。

ブラウザが通常の操作でこれらのファイルへのアクセスFile Errorを--allow-file-access-from-files許可されている場合、セキュリティ上の問題が発生するため、ファイルエラーのタイプはSECURITY_ERR.

次のリンクの情報は古いですが、戦術は問題のコードに似ています (代わりにフラグが --unlimited-storage になりました)。詳細については、この記事を参照してください。

結局のところ、実際のアプリケーションでは Quota リクエストは必須であり、この記事の執筆時点での OP のソリューションには正しいコードが含まれていました。現在、クォータおよび fs リクエストの JavaScript は次のようになります。

navigator.webkitPersistentStorage.requestQuota(1024*1024, function(mB){
  window.requestFileSystem(PERSISTENT, mB, function(fs){
       //fs write/read, ect. code goes here. Or set a global variable to the value fs
       globalFS = fs; //to be accessed later in code, so you don't have to keep requesting.
  }, onError);
}, onError);
于 2014-03-12T22:09:46.590 に答える
0

への呼び出しを追加したところwindow.webkitStorageInfo.requestQuota、動作するようになりました。オプションでChromeを起動したので、なぜそれが必要なのかわかりません--unlimited-quota-for-files。

ここで作業コード：

<!DOCTYPE html> 
<html> 
<head>
<script>

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

function onError(e) {
  console.log('Error', e);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://upload.wikimedia.org/wikipedia/fr/2/26/10_francs_Mathieu_1987_F365-28_revers.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
  window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
    fs.root.getFile('image.jpg', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {

        writer.onwrite = function(e) {};
        writer.onerror = function(e) {};

        var blob = new Blob([xhr.response], {type: 'image/jpeg'});

        writer.write(blob);

      }, function(e) {
  console.log('Error', e);
});
    }, function(e) {
  console.log('Error', e);
});
  }, function(e) {
  console.log('Error', e);
});
}, function(e) {
  console.log('Error', e);
});

  window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
    fs.root.getFile('image.jpg', {create: false}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(event) {
                var img = document.createElement("img");
                img.src = event.target.result;

                document.body.parentNode.insertBefore(img, document.body.nextSibling);
            };
            reader.readAsDataURL(file);
        }, function(e) {
  console.log('Error', e);
});
    }, function(e) {
  console.log('Error', e);
});
  }, function(e) {
  console.log('Error', e);
});

};

xhr.send();
</script>
</head> 
<body>

</body>
</html>
于 2013-07-08T14:00:10.163 に答える