一,咱們在使用html5的技術開發手機app時,並不能像IOS,Android那樣能夠調取手機原生的相機功能,這是咱們就要藉助一些插件來時實現。html
二,安裝Cordoba的相機插件html5
一、在文件目錄下,使用命令安裝相機插件,命令以下:app
cordova plugin add cordova-plugin-camera
二、使用」camera.getPicture「函數來調取相機函數
camera.getPicture(successCallback, errorCallback, options)
successCallback相機調取成功的回調函數。
errorCallback相機調取失敗的回調函數。
options:相機參數設置。參數以下表:
名稱 | 類型 | 默認 | 描述 |
---|---|---|---|
質量 | number |
50 |
保存的圖像的質量,表示爲0-100的範圍,其中100一般是全分辨率,沒有文件壓縮損失。(請注意,關於相機分辨率的信息不可用。) |
destinationType | DestinationType |
FILE_URI |
選擇返回值的格式。 |
sourceType的 | PictureSourceType |
CAMERA |
設置圖片的來源。 |
allowEdit | Boolean |
true |
選擇前容許簡單編輯圖像。 |
編碼類型 | EncodingType |
JPEG |
選擇返回的圖像文件的編碼。 |
targetWidth | number |
以像素爲單位的縮放圖像的寬度 必須與...一塊兒使用targetHeight 。長寬比保持不變。 |
|
targetHeight | number |
以像素爲單位的高度縮放圖像。必須與...一塊兒使用targetWidth 。長寬比保持不變。 |
|
媒體類型 | MediaType |
PICTURE |
設置要從中選擇的媒體類型。只有看成品PictureSourceType 是PHOTOLIBRARY 或者SAVEDPHOTOALBUM 。 |
correctOrientation | Boolean |
捕捉期間旋轉圖像以糾正設備的方向。 | |
saveToPhotoAlbum | Boolean |
捕獲後將圖像保存到設備上的相冊中。 | |
popoverOptions | CameraPopoverOptions |
指定iPad中彈出位置的僅iOS選項。 | |
cameraDirection | Direction |
BACK |
選擇要使用的相機(正面或背面)。 |
Name | Type | Default | Description |
---|---|---|---|
DATA_URL | number |
0 |
返回base64編碼的字符串。數據URL可能會佔用大量內存,致使應用程序崩潰或內存不足錯誤。若是可能,請使用FILEURI或NATIVE_URI |
FILE_URI | number |
1 |
返回文件uri(內容:// media / external / images / media / 2 for Android) |
NATIVE_URI | number |
2 |
返回本地uri(例如,asset-library://... for iOS) |
Name | Type | Default | Description |
---|---|---|---|
JPEG | number |
0 |
返回JPEG編碼的圖像 |
PNG | number |
1 |
返回PNG編碼的圖像 |
Name | Type | Default | Description |
---|---|---|---|
PICTURE | number |
0 |
只容許選擇靜止圖像。默認。將返回經過DestinationType指定的格式 |
VIDEO | number |
1 |
只容許選擇視頻,只返回網址 |
ALLMEDIA | number |
2 |
容許從全部媒體類型中選擇 |
Name | Type | Default | Description | |
---|---|---|---|---|
PHOTOLIBRARY | number |
0 |
從圖片庫中選擇圖片(與Android的SAVEDPHOTOALBUM相同) | |
CAMERA | number |
1 |
從相機拍照 | |
SAVEDPHOTOALBUM | number |
2 |
|
Name | Type | Default |
---|---|---|
ARROW_UP | number |
1 |
ARROW_DOWN | number |
2 |
ARROW_LEFT | number |
4 |
ARROW_RIGHT | number |
8 |
ARROW_ANY | number |
15 |
Name | Type | Default | Description |
---|---|---|---|
BACK | number |
0 |
使用背面照相機 |
FRONT | number |
1 |
使用前置攝像頭 |
例子:ui
// 打開相機 openCamera: function (selection) { var srcType = Camera.PictureSourceType.CAMERA; // 只能從相機裏取 var cameraOptions = uploadCtrl.setOptions(srcType); // 配置參數函數 navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, cameraOptions); }, // 從相冊獲取圖片 openFilePicker(selection){ var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; var pickerOptions = uploadCtrl.setOptions(srcType); navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, pickerOptions); }, // 相機調取成功成功 cameraSuccess(imageUri){ // console.log('調取成功') uploadCtrl.createImg(imageUri); }, // 相機調取失敗 cameraError(error){ $$('.page[data-page="upload"] .imgUpload-overlay').removeClass('imgUpload-overlay-active'); // 選擇器打開,遮罩層打開 var obj =$$('.page[data-page="upload"]').find('.'+uploadCtrl.imgType); var index = uploadCtrl.imgType.substr(4); uploadCtrl.uploadTypeCondition[index].hasImg = false; obj.find('.img-item').removeClass('no'); // 上傳模塊隱藏 obj.find('.has-img').addClass('no'); if(error !=='Camera cancelled.' && error !=='no image selected' && error !=='Selection cancelled.'){ // 相機取消 myApp.alert('<span class="alertTip">'+error+'</span>',['']); } }, // 相機參數配置 setOptions(srcType){ var options = { quality: 60, destinationType: Camera.DestinationType.FILE_URI,//圖片的base64編碼 sourceType: srcType, encodingType: Camera.EncodingType.jpg, mediaType: Camera.MediaType.PICTURE, allowEdit: false, correctOrientation: true, //Corrects Android orientation quirks saveToPhotoAlbum:false, // 不容許保存 }; return options; },