1

我一直在玩 JavaScript 的 FileSystem API，我已经成功地将文件存储到 API 提供的文件存储中，

我试图读取存储的文件，这是一个JPG图像，并使用FileReaderwith方法读取它，所以我可以使用属性readAsDataURL在SVG中显示它，xlink:href

但是图像（SVG图像）不会显示图像（只有空白），当我使用Chrome提供的“检查元素”时，我看到xlink:href属性填充了这个值：

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

（其余的是很长的A's 序列）

不知道怎么回事

这是我用来读取文件并显示元素的代码：

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's 的序列因为太长而被缩短。

这是将文件插入/创建到我在开头插入的文件系统的代码：

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);
}

文件名包含我已经检查过的“Desert.jpg”，这是真的，我从服务器得到了 blob，

4

1 回答 1

0

问题解决了..显然Blob或脚本的代码没有问题，并且文件实际上正确保存在HTML5的文件系统存储API中，

问题是Blob确实已损坏，因为在我更改服务器中的转换方法后，服务器（在.net中）未能将文件转换为字节（）以发送到客户端（html5），图像可以正确正确加载

于 2012-11-13T11:13:35.900 回答