天天看點

一個Cordova 調用相機和本地相冊的執行個體分享

使用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~搞定

繼續閱讀