一,咱们在使用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; },