Cordova - 使用Cordova開發iOS應用實戰5（獲取手機裏照片，並編輯）

時間 2019-11-11

標籤 cordova 使用開發 ios 應用實戰獲取手機照片編輯欄目 Cordova 简体版

原文原文鏈接

使用Cordova能夠很方便的經過js代碼讀取系統相簿裏面的照片，同使用設備攝像頭拍照同樣，一樣須要先添加camera插件。

一，添加camera插件

首先咱們要在「終端」中進入工程所在的目錄，而後運行以下命令：

 
         cordova plugin add cordova-plugin-camera

能夠看到camera相機插件已經成功添加了：

原文:Cordova - 使用Cordova開發iOS應用實戰5（獲取手機裏照片，並編輯）

二，獲取照片

咱們能夠選擇是從「照片庫（時刻）」中讀取圖片，或者從「相簿」中讀取圖片。

1，從「相簿」中獲取照片

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>Capture Photo</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         var 
         pictureSource; 
        
         var 
         destinationType; 
        
         document.addEventListener( 
         "deviceready" 
         ,onDeviceReady, 
         false 
         ); 
        
         //Cordova加載完成會觸發 
        
         function 
         onDeviceReady() { 
        
         pictureSource=navigator.camera.PictureSourceType; 
        
         destinationType=navigator.camera.DestinationType; 
        
         } 
        
         //獲取照片 
        
         function 
         getPhoto(source) { 
        
         //quality : 圖像的質量，範圍是[0,100] 
        
         navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        
         destinationType: destinationType.FILE_URI, 
        
         sourceType: source }); 
        
         } 
        
         //獲取照片成功 
        
         function 
         onPhotoURISuccess(imageURI) { 
        
         //打印出照片路徑 
        
         console.log(imageURI); 
        
         var 
         largeImage = document.getElementById( 
         'largeImage' 
         ); 
        
         largeImage.style.display =  
         'block' 
         ; 
        
         largeImage.src = imageURI; 
        
         } 
        
         //獲取照片是吧 
        
         function 
         onFail(message) { 
        
         alert( 
         '獲取失敗: ' 
         + message); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "getPhoto(pictureSource.PHOTOLIBRARY);" 
         > 
        
         從「相簿」中獲取照片 
        
         </button> <br> 
        
         <img style= 
         "display:none;" 
         id= 
         "largeImage" 
         src= 
         "" 
         /> 
        
         </body> 
        
         </html>

2，從「照片庫（時刻）」中獲取照片

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>Capture Photo</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         var 
         pictureSource; 
        
         var 
         destinationType; 
        
         document.addEventListener( 
         "deviceready" 
         ,onDeviceReady, 
         false 
         ); 
        
         //Cordova加載完成會觸發 
        
         function 
         onDeviceReady() { 
        
         pictureSource=navigator.camera.PictureSourceType; 
        
         destinationType=navigator.camera.DestinationType; 
        
         } 
        
         //獲取照片 
        
         function 
         getPhoto(source) { 
        
         //quality : 圖像的質量，範圍是[0,100] 
        
         navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        
         destinationType: destinationType.FILE_URI, 
        
         sourceType: source }); 
        
         } 
        
         //獲取照片成功 
        
         function 
         onPhotoURISuccess(imageURI) { 
        
         //打印出照片路徑 
        
         console.log(imageURI); 
        
         var 
         largeImage = document.getElementById( 
         'largeImage' 
         ); 
        
         largeImage.style.display =  
         'block' 
         ; 
        
         largeImage.src = imageURI; 
        
         } 
        
         //獲取照片是吧 
        
         function 
         onFail(message) { 
        
         alert( 
         '獲取失敗: ' 
         + message); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "getPhoto(pictureSource.SAVEDPHOTOALBUM);" 
         > 
        
         從「時刻」中獲取照片 
        
         </button> <br> 
        
         <img style= 
         "display:none;" 
         id= 
         "largeImage" 
         src= 
         "" 
         /> 
        
         </body> 
        
         </html>