2013-07-04 73 views
0

我在sdcard中保存了一個畫布圖像。 我將它保存到名爲Pictures的文件夾中,並嘗試將其顯示回設備上。使用PhoneGap從SD卡讀取已保存的圖像

現在我必須找回並顯示它。我嘗試下面的代碼:

的Javascript

var ShowSavedImage = function(Imagename){ 
     alert("in ShowSavedImage "); 
     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, onFail); 

    } 

function onFail(message) { 
     alert('Failed because: ' + message); 
    } 

function gotFS(fileSystem) { 
    fileSystem.root.getFile("Pictures/b64Image_1372901806166.png", {create: true}, gotFileEntry, fail); 
} 

function gotFileEntry(fileEntry) { 
    fileEntry.file(gotFile, fail); 
} 

function gotFile(file){ 
    readDataUrl(file); 
} 

function readDataUrl(file) { 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) { 
     console.log("Read as data URL"); 
     console.log(evt.target.result); 
     document.getElementById("smallImage").style.display='block'; 
     document.getElementById("smallImage").src = evt.target.result; 
    }; 
    reader.readAsDataURL(file); 
} 

function fail(evt) { 
    console.log(evt.target.error.code); 
} 

HTML

<div data-role="page" id="SavedImage"> 
      <div data-role="header" class= "header" data-position="fixed" data-tap-toggle="false" > 

      </div> 
      <div data-role="content" > 

      <center> 
      <h3 id="savedImageHeader"></h3> 
      <!-- <img src="" id="savedImageDisplay" style="display:none;height:auto; max-height:70%; width:auto; max-width:90%;"/> --> 
       <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
           </center> 

      </div> 

     </div> 

當我試圖此代碼我收到以下錯誤

07-04 09:26:11.418: I/Web Console(22909): processMessage failed: Stack: TypeError: Cannot read property 'style' of null 
07-04 09:26:11.418: I/Web Console(22909):  at [object Object].<anonymous> (file:///android_asset/www/js/list.js:691:45) 
07-04 09:26:11.418: I/Web Console(22909):  at file:///android_asset/www/js/cordova-2.5.0.js:2549:20 
07-04 09:26:11.418: I/Web Console(22909):  at Object.captureReturnValue [as success] (file:///android_asset/www/js/cordova-2.5.0.js:847:20) 
07-04 09:26:11.418: I/Web Console(22909):  at Object.callbackFromNative (file:///android_asset/www/js/cordova-2.5.0.js:291:46) 
07-04 09:26:11.418: I/Web Console(22909):  at processMessage (file:///android_asset/www/js/cordova-2.5.0.js:964:21) 
07-04 09:26:11.418: I/Web Console(22909):  at Function.processMessages (file:///android_asset/www/js/cordova-2.5.0.js:1002:17) 
07-04 09:26:11.418: I/Web Console(22909):  at androidExec (file:///android_asset/www/js/cordova-2.5.0.js:856:21) 
07-04 09:26:11.418: I/Web Console(22909):  at [object Object].readAsDataURL (file:///android_asset/www/js/cordova-2.5.0.js:2528:5) 
07-04 09:26:11.418: I/Web Console(22909):  at readDataUrl (file:///android_asset/www/js/list.js:694:12) 
07-04 09:26:11.418: I/Web Console(22909):  at gotFile (file:///android_asset/www/js/list.js:683:5) at file:///android_asset/www/js/cordova-2.5.0.js:971 

我是新至PhoneGap和我不明白哪裏出了問題。

如何解決這個問題?

+0

似乎在加載DOM元素之前調用document.getElementById(「smallImage」)。style.display ='block';'。在''標籤之前加上你的js。 –

+0

你好,你的代碼是爲我工作的。我沒有明白你爲什麼遇到這個問題。 –

回答

0

我認爲你的問題沒有phonegap,這是一個純粹的js錯誤,我認爲你的代碼在dom被構建之前運行。所以你可以添加任何按鈕,然後在這個按鈕上點擊並測試你的代碼。我認爲這會讓你理解這個問題