圖像沒有顯示使用鉻文件系統到URL

我有以下代碼將圖像寫入文件系統，並閱讀回顯示。在嘗試使用文件系統API之前，我將整個base64映像加載到src屬性中，並且圖像顯示正常。問題是圖像可能很大，因此如果添加幾張5MB圖像，則會導致內存不足。所以我認爲我只是將它們寫入tmp存儲，並且只將URL傳遞給src屬性。麻煩是，什麼都不顯示。圖像沒有顯示使用鉻文件系統到URL

最初我以爲URL可能有問題，但後來我進入文件系統目錄，找到它所指的圖像，並用真正的二進制圖像替換它，並將其重命名爲與替換的圖像相同圖片。這工作正常，圖像顯示正確，所以URL看起來不錯。

我可以得出的唯一結論是圖像的寫法在某種程度上是錯誤的 - 特別是創建blob的點。我瀏覽過blob API，看不到任何我可能錯過的內容，但是我顯然做錯了什麼，因爲它似乎在爲其他人工作。另外，我還嘗試將圖像存儲在IndexedDB中，並使用createObjectURL來顯示圖像 - 雖然URL看起來正確，但屏幕上並未顯示任何內容。因此嘗試在文件系統API。在兩種情況下，使用相同的數據，blob創建都是相同的。

正如我所提到的，源數據是一個base64編碼的字符串。是的，我也嘗試將原始base64數據存儲在blob中（帶和不帶前綴），並且也不起作用。

其他信息 - Chrome版本28，從回調的Linux操作系統Ubuntu


    //strip the base64 `enter code here`stuff ... 
    var regex = /^data.+;base64,/; 
    if (regex.test(imgobj)) { //its base64 
     imgobj = imgobj.replace(regex,""); 
     //imgobj = B64.decode(imgobj); 
     imgobj = window.atob(imgobj); 
    } else { 
     console.log("it's already :", typeof imgobj); 
    } 

    // store the object into the tmp space 
    window.requestFileSystem(window.TEMPORARY, 10*1024*1024, function(fs) { 
     // check if the file already exists 
     fs.root.getFile(imagename, {create: false}, function(fileEntry) { 
      console.log("File exists: ", fileEntry); 
      callback(fileEntry.toURL(), fileEntry.name); 
         // 
     }, function (e) { //file doesn't exist 
      fs.root.getFile(imagename, {create: true}, function (fe) { 
       console.log("file is: ", fe); 
       fe.createWriter(function(fw){ 
        fw.onwriteend = function(e) { 
         console.log("write complete: ", e); 
         console.log("size of file: ", e.total) 
         callback(fe.toURL(), fe.name); 
        }; 
        fw.onerror = function(e) { 
         console.log("Write failed: ", e.toString()); 
        }; 
        var data = new Blob([imgobj], {type: "image/png"}); 
        fw.write(data); 
       }, fsErrorHandler); 
      }, fsErrorHandler); 
     }); 
     // now create a file 
    }, fsErrorHandler);

輸出是：

<img class="imgx" src="filesystem:file:///temporary/closed-padlock.png" width="270px" height="270px" id="img1" data-imgname="closed-padlock.png">

我在有點停頓的是，除非有人可以提供一些指導。 ..

更新

我跑了一個測試，編碼和解碼base64圖像w第i個既B64encoder /解碼器和ATOB/BTOA -

console.log(imgobj); // this is the original base64 file from the canvas.toDataURL function 
/* B64 is broken*/ 
B64imgobjdecode = B64.decode(imgobj); 
B64imgobjencode = B64.encode(B64imgobjdecode); 
console.log(B64imgobjencode); 
/* atob and btoa decodes and encodes correctly*/ 
atobimgobj = window.atob(imgobj); 
btoaimgobj = window.btoa(atobimgobj); 
console.log(btoaimgobj);

結果表明，BTOA/ATOB功能正常工作，但B64不 - 可能是因爲原來的編碼沒有采用B64.encode功能。 ..

在文件系統TEMPORARY中產生的文件，我跑過一個在線base64編碼器進行比較，結果是完全不同的。所以問題是 - 在文件系統臨時存儲中，圖像應該是一個確切的圖像，還是填充了只有文件系統API才能理解的「某些東西」？請記住，我將原始的PNG放在文件系統目錄中，並且圖像正確顯示，這往往表明圖像的元數據（例如文件名）被保存在別處...

有人可以這個工作的實現確認圖像是否作爲圖像存儲在文件系統中，還是用額外的元數據填充？

來源

2013-06-25 Ballscadoon McGillicuddy

所以要回答我自己的問題 - 核心問題是在base64編碼/解碼 - 我從那以後改變這個使用像ajax和responseTypes像arraybuffer和blob的東西已經開始工作。要回答問題的最後部分，這是我發現的 - 在文件系統tmp存儲中，是的，文件應該是一個確切的二進制副本 - 在鉻和手機中驗證。

來源

2013-07-31 05:28:36

圖像沒有顯示使用鉻文件系統到URL

回答

相關問題