讀取圖像文件，並顯示它

我一直在玩的文件系統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

讀取圖像文件，並顯示它

回答

相關問題