After taking a picture using phonegap (navigator.camera.getPicture) how can i store it in my local drive?

Question

Here is my phonegap code. This code is for taking the picture as well as save the picture also:

<!DOCTYPE html>
<html>
<head>
<title>Capture Photo and Save</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
    var pictureSource; // picture source
    var destinationType; // sets the format of returned value 

    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready to be used!
    function onDeviceReady() {
        pictureSource = navigator.camera.PictureSourceType;
        destinationType = navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    function onPhotoDataSuccess(imageData) {
        // Uncomment to view the base64 encoded image data
        var date = ""
        var d = new Date();
        date = "" + d.getDate() + "-" + (d.getMonth() + 1) + "-"
                + d.getFullYear();
        alert(date)
        //alert(imageData);  

        // Get image handle
        //
        var smallImage = document.getElementById('smallImage');
        // Unhide image elements
        //
        smallImage.style.display = 'block';

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        smallImage.src = "data:image/jpeg;base64," + imageData;

        alert("data:image/jpeg;base64," + imageData)

        //This part is for saving the capture photo
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

        function gotFS(fileSystem) {
            alert("image/" + date + ".jpeg")
            fileSystem.root.getFile("image/" + date + ".jpeg", {
                create : true,
                exclusive : false
            }, gotFileEntry, fail);
        }
        function gotFileEntry(fileEntry) {
            fileEntry.createWriter(gotFileWriter, fail);
        }
        function gotFileWriter(writer) {
            var data = "data:image/jpeg;base64," + imageData;
            writer.write(data);

        }
        function fail(error) {
            alert("error")
            console.log(error.code);
        }
    }

    // Called when a photo is successfully retrieved
    function onPhotoURISuccess(imageURI) {
        // Uncomment to view the image file URI 
        // console.log(imageURI);

        // Get image handle
        var largeImage = document.getElementById('largeImage');
        // Unhide image elements
        largeImage.style.display = 'block';

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        largeImage.src = imageURI;
    }

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

    // A button will call this function
    //
    function capturePhotoEdit() {
        // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
            quality : 20,
            allowEdit : true,
            destinationType : destinationType.DATA_URL
        });
    }

    // A button will call this function
    function getPhoto(source) {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(onPhotoURISuccess, onFail, {
            quality : 50,
            destinationType : destinationType.FILE_URI,
            sourceType : source
        });
    }

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

    }
</script>
</head>
<body>
    <button onclick="capturePhoto();">Capture Photo</button>
    <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button>
    <br>
    <button onclick="savePhoto();">Save The Photo In Server</button>
    <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From
        Photo Library</button>
    <br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From
        PhotoAlbum</button>
    <br>
    <img style="display: none; width: 60px; height: 60px;" id="smallImage"
        src="" />
    <img style="display: none;" id="largeImage" src="" />
</body>
</html>

I am taking a picture and trying to save it like this but it is saving as a file not as a picture(binary).so after saving the picture its not opening.How can i save it with proper fromat so that i can open it as a picture ?

http://docs.phonegap.com/en/1.0.0/phonegap_camera_camera.md.html — stackoverflow, Apr 24 '13 at 10:48

score 2 · Answer 1 · answered Jul 03 '13 at 11:19

If you are ok to save image in photo gallery, then try following code :

function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
        quality: 50,
        destinationType : destinationType.FILE_URI,
        saveToPhotoAlbum : true,
    });
}

score 0 · Answer 2 · answered Apr 24 '13 at 10:46

0

 function save(){

document.addEventListener("deviceready", onDeviceReady, false);
 }



// PhoneGap is ready
//
function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
    fileSystem.root.getFile("pic.jpg", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {

    var photo = document.getElementById("image");
    writer.write(photo.value);

}

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

answered Apr 24 '13 at 10:46

stackoverflow

2,320
3
17
21

I put this 2 lines inside my gotFileWriter function but i got an alert Undefined. var photo = document.getElementById("smallImage"); alert(photo.value); – Kousik Apr 24 '13 at 12:26
dude please go through my code. i am unable to store the picture.its saving as a simple file.i almost tried every thing but unable to fix this problem. need help. – Kousik Apr 24 '13 at 12:33
bro i have only search this code for u. i can work much more with phonegap – stackoverflow Apr 24 '13 at 12:34
http://stackoverflow.com/questions/13060397/saving-a-png-or-jpg-image-to-photos-in-ios-via-phonegap – stackoverflow Apr 24 '13 at 12:36
http://www.slideshare.net/jsphkhan/saving-image-to-android-devices-gallery-phonegap-android – stackoverflow Apr 24 '13 at 12:37
i tried this tricks yesterday. i think i am missing something but not able to find it. – Kousik Apr 24 '13 at 12:38

After taking a picture using phonegap (navigator.camera.getPicture) how can i store it in my local drive?

2 Answers2