1

私はJavaScript用のFileSystemAPIで遊んでいますが、APIによって提供されるファイルストレージにファイルを保存することにすでに成功しています。

保存されているJPG画像であるファイルを読み取ろうとしましたFileReaderが、メソッドを使用して読み取ったので、属性readAsDataURLを使用してSVGに表示できます。xlink:href

しかし、画像（SVG画像）は画像を表示しません（空白のみ）。Chromeが提供する「要素の検査」を使用すると、xlink:href属性が次の値で満たされていることがわかりました。

"data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAA ..."

（残りは非常に長いシーケンスですA）

何が悪いのかわかりませんが

ファイルを読み取って要素を表示するために使用するコードは次のとおりです。

var element; 
element= document.createElementNS("http://www.w3.org/2000/svg", "image");
element.setAttribute("id", "img1");
element.setAttribute("x", "30");
element.setAttribute("y", "250");
element.setAttribute("width", "150");
element.setAttribute("height", "150");

fs.root.getFile("Desert.jpg", {}, function (fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
        element.setAttribute("xlink:href", e.target.result);
        };

        reader.readAsDataURL(file);
    }, FileExceptions);
},FileExceptions); //error callback

return element;

でエンコードされる前の生の文字列uri btoa()：

data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=

ここで、...は、のシーケンスがA長すぎるために短縮されていることを示します。

これは、最初に挿入したファイルシステムにファイルを挿入/作成するためのコードです。

function InsertFile(fileName: string, blob:Blob) {
    fs.root.getFile(fileName, { create: true /*exclusive: true*/ }, function (fileEntry) { 
        //change the exclusive to true, this is for debugging only
        fileEntry.createWriter(function (fileWriter) {
            fileWriter.onwriteend = function (e) { InfoLog("Write Completed"); };
        fileWriter.onerror = function (e) { InfoLog("Write Failed \r\n" + e.toString()); };
        fileWriter.write(blob);
        },FileExceptions);
    }, FileExceptions);
}

fileNameには「Desert.jpg」が含まれています。すでに確認しましたが、サーバーからblobを取得したのは事実です。

4

1 に答える 1

0

解決された問題..どうやらBlobやスクリプトのコードに問題はなく、ファイルは実際にはHTML5のファイルシステムストレージAPIに正しく保存されています。

問題は、サーバーの変換方法を変更した後、ファイルをbyte（）に変換してクライアント（html5）に送信できなかったのはサーバー（.net内）であったため、Blobが実際に破損したことでした。画像を正しく正しく読み込むことができます

于 2012-11-13T11:13:35.900 に答える