将图像保存在本地存储phonegap中

时间:2021-11-07 17:16:45

I am quite new to phonegap and it says that it has a capture feature. So i used it and was very nice. However I displayed the picture in the html but i dont know how to save the image.

我对phonegap很新,它说它有捕获功能。所以我用它并且非常好。但是我在html中显示了图片,但我不知道如何保存图像。

according to http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html

根据http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html

You can do whatever you want with the encoded image or URI, for example:

您可以使用编码图像或URI执行任何操作,例如:

Render the image in an tag (see example below) Save the data locally (LocalStorage, Lawnchair, etc) Post the data to a remote server

在标签中渲染图像(参见下面的示例)在本地保存数据(LocalStorage,Lawnchair等)将数据发布到远程服务器

Unfortunately there was no sample code on how to do it

不幸的是,没有关于如何做的示例代码

How do i save image in LocalStorage or gallery of device?

如何在LocalStorage或设备库中保存图像?

2 个解决方案

#1


22  

Great you found the solution, I did it the following way. Hope it helps someone else.

伟大的你找到了解决方案,我按照以下方式做到了。希望它可以帮助别人。

Simply call capturePhoto function on button click event.

只需在按钮点击事件上调用capturePhoto功能即可。

// A button will call this function
//
function capturePhoto() {
    sessionStorage.removeItem('imagepath');
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

function onPhotoDataSuccess(imageURI) { 
        // Uncomment to view the base64 encoded image data
        // console.log(imageData);

        // Get image handle
        //
        var imgProfile = document.getElementById('imgProfile');

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        imgProfile.src = imageURI;
        if(sessionStorage.isprofileimage==1){
            getLocation();
        }
        movePic(imageURI);
}

// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

function movePic(file){ 
    window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError); 
} 

//Callback function when the file system uri has been resolved
function resolveOnSuccess(entry){ 
    var d = new Date();
    var n = d.getTime();
    //new file name
    var newFileName = n + ".jpg";
    var myFolderApp = "MyAppFolder";

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {      
    //The folder is created if doesn't exist
    fileSys.root.getDirectory( myFolderApp,
                    {create:true, exclusive: false},
                    function(directory) {
                        entry.moveTo(directory, newFileName,  successMove, resOnError);
                    },
                    resOnError);
                    },
    resOnError);
}

//Callback function when the file has been moved successfully - inserting the complete path
function successMove(entry) {
    //Store imagepath in session for future use
    // like to store it in database
    sessionStorage.setItem('imagepath', entry.fullPath);
}

function resOnError(error) {
    alert(error.code);
}

What this code does is

这段代码的作用是什么

Captures image and stores it in MyAppFolder on device's SD Card. And stores imagepath in session so as to insert it in local database.

捕获图像并将其存储在设备SD卡上的MyAppFolder中。并在会话中存储imagepath,以便将其插入本地数据库。

#2


9  

Setting saveToPhotoAlbum in the options to True works nicely as well. Got that from the 2.9 docs here.

将选项中的saveToPhotoAlbum设置为True也可以很好地工作。从这里的2.9文档得到了。

#1


22  

Great you found the solution, I did it the following way. Hope it helps someone else.

伟大的你找到了解决方案,我按照以下方式做到了。希望它可以帮助别人。

Simply call capturePhoto function on button click event.

只需在按钮点击事件上调用capturePhoto功能即可。

// A button will call this function
//
function capturePhoto() {
    sessionStorage.removeItem('imagepath');
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

function onPhotoDataSuccess(imageURI) { 
        // Uncomment to view the base64 encoded image data
        // console.log(imageData);

        // Get image handle
        //
        var imgProfile = document.getElementById('imgProfile');

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        imgProfile.src = imageURI;
        if(sessionStorage.isprofileimage==1){
            getLocation();
        }
        movePic(imageURI);
}

// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

function movePic(file){ 
    window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError); 
} 

//Callback function when the file system uri has been resolved
function resolveOnSuccess(entry){ 
    var d = new Date();
    var n = d.getTime();
    //new file name
    var newFileName = n + ".jpg";
    var myFolderApp = "MyAppFolder";

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {      
    //The folder is created if doesn't exist
    fileSys.root.getDirectory( myFolderApp,
                    {create:true, exclusive: false},
                    function(directory) {
                        entry.moveTo(directory, newFileName,  successMove, resOnError);
                    },
                    resOnError);
                    },
    resOnError);
}

//Callback function when the file has been moved successfully - inserting the complete path
function successMove(entry) {
    //Store imagepath in session for future use
    // like to store it in database
    sessionStorage.setItem('imagepath', entry.fullPath);
}

function resOnError(error) {
    alert(error.code);
}

What this code does is

这段代码的作用是什么

Captures image and stores it in MyAppFolder on device's SD Card. And stores imagepath in session so as to insert it in local database.

捕获图像并将其存储在设备SD卡上的MyAppFolder中。并在会话中存储imagepath,以便将其插入本地数据库。

#2


9  

Setting saveToPhotoAlbum in the options to True works nicely as well. Got that from the 2.9 docs here.

将选项中的saveToPhotoAlbum设置为True也可以很好地工作。从这里的2.9文档得到了。