web-dev-qa-db-fra.com

Phonegap - Choisissez une image de la galerie

Quelqu'un peut-il me dire ou m'indiquer comment obtenir une image de la galerie d'images du téléphone dans Phonegap/Android? Il y a une documentation sur l'accès à la caméra (ce qui fonctionne très bien) mais pas sur la sélection d'une image existante.

Je cherche Phonegap/Javascript plutôt que Java.

Merci d'avance!

javascriptandroidhtml5mobilecordova
22
logic-unit

Euh, les documents Camera couvrent ceci. Est-ce que cela ne fonctionne pas pour vous? Consultez Camera.PictureSourceType pour plus de détails. Le site de documentation donne cet exemple pour dériver une image ainsi:

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

sourceType est l'élément crucial ici. Il peut s'agir de Camera.PictureSourceType.CAMERA (valeur par défaut), ou plus utile pour vous, il peut s'agir de Camera.PictureSourceType.PHOTOLIBRARY ou Camera.PictureSourceType.SAVEDPHOTOALBUM.

Documentation de l'appareil photo

47
Ben

Vous pouvez également utiliser la bibliothèque suivante: https://github.com/wymsee/cordova-imagePicker .__ Je préfère celle-ci car elle est plus petite, facile à mettre en œuvre et ne nécessite pas l'autorisation de passer à la caméra.

5
Klapsa2503

Jetez un oeil à cet post , cela peut vous aider.

Parfois, vous pouvez rencontrer des problèmes lors du téléchargement d’une image existante. La solution est simple, par cette réponse . En résumé, vous devez convertir l'URI Android natif en un identificateur que l'API peut utiliser:

// 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);
  }
);
2
T.Baba
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);
1
Jessie Han

Je travaille sur cordova-plugin-photo-library plugin, qui offre un moyen multiplate-forme d'énumérer toutes les photos de l'appareil.

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
        });
    });

0
viskin

Facile

Premier ajouter un plugin de caméra au projet dans CMD.

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

Et puis essayez ceci

<!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>

Je suis sûr à 100% que ça marche.

la référence est ici Choisissez une image dans Appareil photo ou Galerie - PhoneGap

0
Mohsen Molaei