使用Cordova調用原生相機有以下幾個步驟:
1.下載下傳相關的插件cordova-plugin-camera,在指令行,切換至項目根目錄下後,輸入以下指令:
cordova plugin add cordova-plugin-camera
2.我們會看到在項目assets/www/plugin檔案夾下多了一個插件cordova-plugin-camera
3.開發index.html,這裡需要引入cordova.js和html實作邏輯的cameraindex.is檔案,不需要引入插件中的js,你會發現,在運作的時候,插件中的js已經自動引入了,其實這些工作都由cordova.js幫我們做啦~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<meta name="viewport" id="viewport" content="width=device-width,height=device-height,
initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<title>調試調用本地相機功能</title>
<link href="css/cameraindex.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css"/>
</head>
<body onload="onBodyLoad()">
<div class="container">
<div class="showpic">
<img id="showimg" class="showimg" src="img/logo.png" />
</div>
<div class="choosediv">
<button class="takepicture" onclick="takePhoto()">拍照</button>
<button class="takepicture" onclick="takefromgalery()">相冊</button>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/cameraindex.js"></script>
</body>
</html>
2.開發cameraindex.css檔案
body{
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
background-color: #FFCCCC;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:14px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.choosediv{
width:100%;
height:100px;
position: fixed;
text-align: center;
bottom: 10%;
}
.showimg{
margin-top: 20%;
max-width: 300px;
max-width: 300px;
width:200px;
height:200px;
}
.takepicture{
width:100px;
height:100px;
text-align: center;
color: #ffffff;
font-family: "微軟雅黑";
font-size: 16px;
background-color: #FF9999;
margin-left: 20px;
outline:none;
outline-color: rgba(255,255,255,0);
border-radius: 50% 50%;
border:0px;
}
.showpic{
width:80%;
height:50%;
background-color: rgba(255,255,255,0.6);
position:fixed;
top:10%;
left:10%;
text-align: center;
}
3.實作cameraindex.js,這裡傳回的是經過base64編碼的内容,如果你想傳回圖檔位址的話,可以修改這個參數,
destinationType : Camera.DestinationType.DATA_URL ---傳回base64編碼的内容
destinationType : Camera.DestinationType.FILE_URI ---傳回圖檔存儲位址,IOS傳回的位址
其他參數說明:
quality : 75 --圖檔品質,或者可以說圖檔的壓縮比例,壓縮後的圖檔可以減少存儲空間和傳輸帶寬,設定範圍為0-100
destinationType : --目标類型,用來控制圖檔是以base64還是url的方式傳回。
sourceType : 定義函數如何擷取圖檔。取值有以下幾種: Camera.PictureSourceType.CAMERA 使用攝像頭來獲 取; Camera.PictureSourceType.PHOTOLIBRARY 使用裝置圖庫; Camera.PictureSourceType.SAVEDPHOTOALBUM 從已存相冊中擷取圖檔。
allowEdit : true, --是否允許編輯,如果設定為true,使用者可對圖檔進行縮小放大及滑動等操作來編輯圖檔。
encodingType : Camera.EncodingType.JPEG --告訴函數傳回何種圖檔類型,支援的選項有JPEG和PNG.
targetWdith : 100, --目标高度,決定函數将傳回多大尺寸的圖檔,你可以設定targetWidth或者targetHeight中的任何一個,圖檔會據此進行縮放。如果你兩個值都指定了,圖檔的縮放比例會根據最小的那個值進行縮放。無論哪種方式,長寬比都不會發生改變。
targetHeight : 100, --目标寬度
popoverOptions : CameraPopoverOptions, 設定項調用相機自帶的設定項
saveToPhotoAlbum : false -是否儲存到本地相冊中
function onBodyLoad(){
document.addEventListener("deviceready",onDeviceReady);
}
function onDeviceReady(){
console.log("onDeviceReady");
}
function takePhoto(){
var cameraOptions= {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA, //照相機類型
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
};
console.log("調用拍照接口");
navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}
function takefromgalery(){
var cameraOptions= {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM, //相冊類型
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
};
console.log("調用相冊接口");
navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}
function onCameraSuccess(imageURL){
console.log("onCameraSuccess:"+imageURL);
var image = document.getElementById('showimg');
image.src = "data:image/jpeg;base64," + imageURL;
}
function onCameraError(e){
console.log("onCameraError:"+e);
}
5.在AndroidManifest.xml中添權重限,這步不要忘記了哦~
<uses-permission android:name="android.permission.CAMERA"/>"
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
6.運作app,如果點選按鈕沒有調用的話,可以看一下是否本地權限沒有打開,如果是開啟的,就可以正常調用啦~
~bingo~搞定