javascript - 读取图像文件并在 SVG 问题上显示它(JavaScript)

Question

我一直在使用 JavaScript 的 FileSystem API， 我已经成功将文件存储到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);
}

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

Answer 1

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

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