读取图像文件，并显示它

我一直在玩的文件系统API对JavaScript，我已经成功在店内的文件通过API提供的文件存储，读取图像文件，并显示它

我试图SVG问题（JavaScript的）读取被存储的文件，这是一个JPG图像，以及使用该FileReader与readAsDataURL方法，所以可以在SVG使用xlink:href属性显示它读它，

但图像（SVG图像）将不会显示图像（只有空白），当我使用“检查元素”提供铬，只见xlink:href属性充满了这个值：

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

（其余是一个非常漫长的A的序列）

我不知道什么是错的，

这里是我使用读取文件并显示元件的代码：与0123编码之前

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：

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” 这是真的我得到了来自服务器的斑点，

来源

2012-11-12 Eldon Lesley

你可以发布整个svg元素的来源吗？ – btel

它在其他浏览器中加载吗？ – Duopixel

不，它不会加载..我试图将元素更改为普通的HTML img，并以某种方式显示一个损坏的图像。 –

solved..apparently

问题没有什么不对的BLOB或脚本，的代码和文件实际上是HTML5的文件系统存储API的正确保存，

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

来源

2012-11-13 11:13:35

读取图像文件，并显示它

回答

相关问题