Question

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

我试图读取存储的文件，这是一个JPG图像，并使用FileReader方法使用readAsDataURL阅读，所以我可以使用xlink:href属性

在SVG中显示它

但是图像（SVG图像）不会显示图像（只有空白），当我使用Chrome提供的“Inspect Element”时，我看到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;

使用btoa()编码之前的原始字符串uri：

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，

Answer 1

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

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

读取图像文件并在SVG问题上显示（JavaScript）

1 个答案: