CODEWITHSUNDEEP
javascriptandroidhtmlmobilecordova
logic-unit
logic-unit

Reputation: 4313

Phonegap - Choose Image From Gallery

Can anyone tell me, or point me in the direction of how to get an image from the phone's image gallery in Phonegap / Android? There's docs on accessing the camera (which works great) but not selecting an existing image.

I'm looking for Phonegap / Javascript rather than Java.

Thanks in advance!

Upvotes: 22

Views: 58302

Answers (6)

Mohsen Molaei
Mohsen Molaei

Reputation: 144

Easy

First add camera plugin to the project in CMD.

F:\phonegap>myapp>cordova plugin add cordova-plugin-camera

And then Try this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
        <title>PhoneGap app</title>

        <!-- Script -->
        <script type="text/javascript" src="cordova.js" ></script>
        <script type='text/javascript' src='jquery-3.0.0.js' ></script>
        <script type='text/javascript'>
        $(document).ready(function(){

            // Take photo from camera
            $('#but_take').click(function(){
                navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
                    destinationType: Camera.DestinationType.FILE_URL 
                });
            });

            // Select from gallery 
            $("#but_select").click(function(){
                navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
                    allowEdit: true,
                    destinationType: Camera.DestinationType.FILE_URI
                });
            });

            // Change image source
            function onSuccess(imageData) {
                var image = document.getElementById('img');
                image.src = imageData + '?' + Math.random();;
            }

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

        });
        </script>
    </head>
    <body>
        <div style="margin:0 auto; width:30%!important;text-align: center;">
            <img src="img/cam2.jpg" id='img' style="width: 100px; height: 100px;">
        </div><br/>
        <div style="width:100%; text-align:center; padding:10px;">
            <button id='but_take'>Take photo</button>
            <button id='but_select'>Select photo from Gallery</button>
        </div>
    </body>
</html>

I'm 100% sure it works.

the reference is here Choose an image from Camera or Gallery – PhoneGap

Upvotes: 0

viskin
viskin

Reputation: 503

I'm working on cordova-plugin-photo-library plugin which provides cross-platform way to enumerate through all photos on device.

Usage:

cordova.plugins.photoLibrary.getLibrary(function (library) {
    // Here we have the library as array
    cordova.plugins.photoLibrary.getThumbnailUrl(library[0],
        function (thumbnailUrl) { image.src = thumbnailUrl; },
        function (err) { console.log('Error occured'); },
        {
            thumbnailWidth: 512,
            thumbnailHeight: 384,
            quality: 0.8
        });
    });

Upvotes: 0

Klapsa2503
Klapsa2503

Reputation: 919

You can also use following library: https://github.com/wymsee/cordova-imagePicker I prefer this one as it's smaller, easy to implement and does not require permission to camera.

Upvotes: 5

Jessie Han
Jessie Han

Reputation: 127

document.addEventListener("deviceready",function(){

            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){ 
                var sdcard = fileSystem.root;

                sdcard.getDirectory('dcim/camera',{create:false}, function(dcim){
                    var directoryReader = dcim.createReader();
                    directoryReader.readEntries(function(entries){
                       for (var i=0; i<entries.length; i++) {
                           entries[i].file(function(f){
                                 var reader = new FileReader();
                                 reader.onloadend = function (evt) {
                                 var url= evt.target.result;//base64 data uri

                                 console.log(url)
                                 reader.abort();
                             };
                             reader.readAsDataURL(f);

                           },function(error){
                               console("Unable to retrieve file properties: " + error.code);

                           });

                       }

                    },function(e){
                        console.log(e.code);
                    });


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


            }, function(evt){ // error get file system
                 console.log(evt.target.error.code);
            });



        } , true);

Upvotes: 1

T.Baba
T.Baba

Reputation: 649

Take a look at this post, it may help you.

Sometimes, you may face some problem with uploading an existing image. The solution is simple, per this answer. Briefly, you need to convert the native Android URI to one that the API can use:

// URL you are trying to upload from inside gallery
window.resolveLocalFileSystemURI(img.URI, function(entry) {
  console.log(entry.fullPath);
  }, function(evt){
    console.log(evt.code);
  }
);

Upvotes: 2

Ben
Ben

Reputation: 7597

Erm, the Camera docs cover this. Is this not working for you? Check out Camera.PictureSourceType for details. The docs site givens this example for deriving an image thus:

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

sourceType is the crucial bit here. It can be Camera.PictureSourceType.CAMERA (the default), or more useful for you it can be Camera.PictureSourceType.PHOTOLIBRARY or Camera.PictureSourceType.SAVEDPHOTOALBUM.

Camera Documentation

Upvotes: 50

Related Questions