Phonegap - 從圖庫中選擇圖片

任何人都可以告訴我，或者指出我如何從Phonegap/Android的手機圖像庫中獲取圖像？有關於訪問攝像頭的文檔（效果很好），但沒有選擇現有的圖像。Phonegap - 從圖庫中選擇圖片

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

在此先感謝！

2011-07-14 logic-unit

Erm，Camera文檔涵蓋了這一點。這不適合你嗎？詳情請查閱Camera.PictureSourceType。該文檔網站GIVENS這個例子由此得出的圖像：

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。

Camera Documentation

來源

2011-07-14 10:06:01 Ben

+15

偉大的答案，但我認爲PhoneGap的文檔可以用一些照片做。它低於自己。它也可以幫助像我這樣的魚注意力範圍內的人:)謝謝善良的東西的讀者:) –

有什麼區別：PHOTOLIBRARY vs SAVEDPHOTOALBUM – Mirko

@Mirko什麼它說錫：要麼一般圖像庫上設備或特定專輯。（注意，在某些版本的Android上有這兩個選項的怪癖）。 – Ben

看看這個post，它可以幫助你。

有時，上傳現有圖像時可能會遇到一些問題。該解決方案很簡單，根據this answer。簡單地說，你需要原生的Android URI轉換成一個該API可以使用：

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

來源

2012-11-14 08:51:40

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

來源

2014-04-04 09:25:02

您還可以使用下列庫：https://github.com/wymsee/cordova-imagePicker 我喜歡這個，因爲它的體積更小，易於實現和做不需要相機的許可。

來源

2015-01-13 00:22:46 Klapsa2503

我正在致力於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 
 
     }); 
 
    });

來源

2016-10-12 17:58:07 viskin

你好@viskin。抱歉劫持，但我今天找到了你的插件，但在我的手機上，https://jsfiddle.net/kartagis/pjdqp3ku/上的代碼需要15秒。我應該使用localStorage還是加快流程？ –

請在項目的github頁面上打開一個問題 – viskin

易

首先相機插件添加到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>

我100％肯定它的工作原理。

參考這裏 Choose an image from Camera or Gallery – PhoneGap

來源

2017-12-12 16:27:54

Phonegap - 從圖庫中選擇圖片

回答

相關問題