使用PhoneGap从SD卡读取已保存的图像

时间:2013-07-04 04:04:56

标签: jquery-mobile cordova

我正在sdcard中保存画布图像。 我将其保存到名为Pictures的文件夹中,并尝试将其显示回设备上。

现在我必须将其取回并显示出来。我尝试了以下代码:

的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的新手,我不明白出了什么问题。

如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我认为你的问题不在于phonegap,这是一个纯粹的js错误,我认为你的代码在dom构建之前就已经运行了。所以你可以添加任何按钮,然后单击此按钮编写代码并进行测试。我想这会让你理解这个问题