Phonegap - 从图库中选择图像

Question

任何人都可以告诉我，或指出我如何从Phonegap / Android的手机图像库中获取图像？ 有关于访问相机的文档（效果很好）但没有选择现有图像。

我正在寻找Phonegap / Javascript而不是Java。

提前致谢！

Answer 1

嗯， Camera文档涵盖了这一点。 这不适合你吗？ 有关详细信息，请查看Camera.PictureSourceType 。 docs网站为这个示例提供了导出图像的方法：

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

sourceType是关键的一点。 它可以是Camera.PictureSourceType.CAMERA （默认），或者对你更有用，它可以是Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM 。

相机文档

Answer 2

你也可以使用以下库： https ： //github.com/wymsee/cordova-imagePicker我更喜欢这个，因为它更小，易于实现，不需要相机权限。

Answer 3

看看这篇文章，它可能对你有帮助。

有时，上传现有图像可能会遇到一些问题。 根据这个答案，解决方案很简单。 简而言之，您需要将原生Android URI转换为API可以使用的URI：

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

Answer 4

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

Answer 5

我正在研究cordova-plugin-photo-library插件，它提供了跨平台的方式来枚举设备上的所有照片。

用法：

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

Answer 6

简单

首先在CMD中将相机插件添加到项目中。

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

然后尝试一下

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

我百分百肯定它有效。

参考在这里从相机或图库中选择一个图像 - PhoneGap

Phonegap - 从图库中选择图像

问题描述

6 个解决方案

解决方案1
48 已采纳 2011-07-14 10:06:01

解决方案2
5 2015-01-13 00:22:46

解决方案3
2 2012-11-14 08:51:40

解决方案4
1 2014-04-04 09:25:02

解决方案5
0 2016-10-12 17:58:07

解决方案6
0 2017-12-12 16:27:54

Phonegap - 从图库中选择图像

问题描述

6 个解决方案

解决方案1 48 已采纳 2011-07-14 10:06:01

解决方案2 5 2015-01-13 00:22:46

解决方案3 2 2012-11-14 08:51:40

解决方案4 1 2014-04-04 09:25:02

解决方案5 0 2016-10-12 17:58:07

解决方案6 0 2017-12-12 16:27:54

解决方案1
48 已采纳 2011-07-14 10:06:01

解决方案2
5 2015-01-13 00:22:46

解决方案3
2 2012-11-14 08:51:40

解决方案4
1 2014-04-04 09:25:02

解决方案5
0 2016-10-12 17:58:07

解决方案6
0 2017-12-12 16:27:54