1

ファイルシステムに画像を書き込み、それを読み込んで表示する次のコードがあります。ファイルシステム API を試す前に、base64 イメージ全体を src 属性にロードすると、イメージが正常に表示されました。問題は、画像が大きくなる可能性があるため、5MB の画像をいくつか追加すると、メモリが不足することです。そのため、それらを tmp ストレージに書き込み、URL のみを src 属性に渡すことにしました。問題は、何も表示されないことです。

最初は URL に問題があるのではないかと考えていましたが、ファイルシステム ディレクトリに移動し、参照している画像を見つけて実際のバイナリ イメージに物理的に置き換え、置き換えた画像と同じ名前に変更しました。これは問題なく機能し、画像が正しく表示されるので、URL は適切に表示されます。

私が到達できる唯一の結論は、画像の書き込みが何らかの形で間違っているということです。特に、ブロブが作成されるポイントです。私はブロブ API を調べましたが、見逃した可能性のあるものは何も表示されませんが、他のすべての人に対して機能しているように見えるため、明らかに何か間違っています。

余談ですが、画像を IndexedDB に保存し、createObjectURL を使用して画像を表示しようとしましたが、URL は正しいように見えますが、画面には何も表示されません。したがって、ファイルシステム API での試行。BLOB の作成は、どちらの場合も同じで、同じデータを使用します。

前述のように、ソース データは base64 でエンコードされた文字列です。はい、未加工のbase64データをブロブに保存しようとしましたが（プレフィックスの有無にかかわらず）、どちらも機能しませんでした。

その他の情報 - Linux Ubuntu の Chrome バージョン 28


    //strip the base64 `enter code here`stuff ...
    var regex = /^data.+;base64,/;
    if (regex.test(imgobj)) {   //its base64
        imgobj = imgobj.replace(regex,"");
        //imgobj = B64.decode(imgobj);
        imgobj = window.atob(imgobj);
    } else {
        console.log("it's already :", typeof imgobj);
    }

    // store the object into the tmp space
    window.requestFileSystem(window.TEMPORARY, 10*1024*1024, function(fs) {
        // check if the file already exists
        fs.root.getFile(imagename, {create: false}, function(fileEntry) {
            console.log("File exists: ", fileEntry);
            callback(fileEntry.toURL(), fileEntry.name);
                        //
        }, function (e) {   //file doesn't exist
            fs.root.getFile(imagename, {create: true}, function (fe) {
                console.log("file is: ", fe);
                fe.createWriter(function(fw){
                    fw.onwriteend = function(e) {
                        console.log("write complete: ", e);
                        console.log("size of file: ", e.total)
                        callback(fe.toURL(), fe.name);
                    };
                    fw.onerror = function(e) {
                        console.log("Write failed: ", e.toString());
                    };
                    var data = new Blob([imgobj], {type: "image/png"});
                    fw.write(data);
                }, fsErrorHandler);
            }, fsErrorHandler);
        });
        // now create a file
    }, fsErrorHandler);

コールバックからの出力は次のとおりです。

<img class="imgx" src="filesystem:file:///temporary/closed-padlock.png" width="270px" height="270px" id="img1" data-imgname="closed-padlock.png">

誰かが何らかのガイダンスを提供できない限り、私は少し立ち往生しています...

アップデート

B64encoder/decoder と atob/btoa の両方を使用して base64 イメージをエンコードおよびデコードするテストを実行しました -

console.log(imgobj); // this is the original base64 file from the canvas.toDataURL function
/* B64 is broken*/
B64imgobjdecode = B64.decode(imgobj);
B64imgobjencode = B64.encode(B64imgobjdecode);
console.log(B64imgobjencode);
/* atob and btoa decodes and encodes correctly*/
atobimgobj = window.atob(imgobj);
btoaimgobj = window.btoa(atobimgobj);
console.log(btoaimgobj);

結果は、btoa/atob 関数が正しく動作することを示していますが、B64 は動作しません。おそらく、元のエンコーディングで B64.encode 関数が使用されていないためです...

結果のファイルはファイルシステム TEMPORARY にあり、比較のためにオンラインの base64 エンコーダーを実行しましたが、結果はまったく異なります。問題は、ファイルシステムの一時ストレージにある間、イメージは正確なイメージであるはずですか、それともファイルシステム API だけが理解できる「何か」で埋められているのでしょうか? 元の PNG をファイル システム ディレクトリに配置し、画像が正しく表示されたことを思い出してください。これは、画像に関するメタデータ (ファイル名など) が他の場所に保持されていることを示している傾向があります...

これを実際に実装している人は、画像がファイルシステムに画像として保存されているのか、それとも追加のメタデータが埋め込まれているのかを確認できますか?

4

1 に答える 1

2

したがって、私自身の質問に答えるために-中心的な問題はbase64エンコーディング/デコーディングにありました-それ以来、これを変更して、ajaxや、arraybufferやblobなどのresponseTypesなどを使用し、動作を開始しました。質問の最後の部分に答えるために、これが私が見つけたものです-ファイルシステムのtmpストレージで、はい、ファイルは正確なバイナリコピーであるはずです-これをchromeとphonegapで検証しました。

于 2013-07-31T05:28:36.867 に答える