一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现。
二,安装Cordoba的相机插件
1、在文件目录下,使用命令安装相机插件,命令如下:
cordova plugin add cordova-plugin-camera
2、使用”camera.getPicture“函数来调取相机
camera.getPicture(successCallback, errorCallback, options)
successCallback相机调取成功的回调函数。
errorCallback相机调取失败的回调函数。
options:相机参数设置。参数如下表:
名称类型默认描述
质量
number
50
保存的图像的质量,表示为0-100的范围,其中100通常是全分辨率,没有文件压缩损失。(请注意,关于相机分辨率的信息不可用。)
destinationType
FILE_URI
选择返回值的格式。
sourceType的
CAMERA
设置图片的来源。
allowEdit
Boolean
true
选择前允许简单编辑图像。
编码类型
JPEG
选择返回的图像文件的编码。
targetWidth
number
以像素为单位的缩放图像的宽度必须与...一起使用targetHeight。长宽比保持不变。
targetHeight
number
以像素为单位的高度缩放图像。必须与...一起使用targetWidth。长宽比保持不变。
媒体类型
PICTURE
设置要从中选择的媒体类型。只有当作品PictureSourceType是PHOTOLIBRARY或者SAVEDPHOTOALBUM。
correctOrientation
Boolean
捕捉期间旋转图像以纠正设备的方向。
saveToPhotoAlbum
Boolean
捕获后将图像保存到设备上的相册中。
popoverOptions
指定iPad中弹出位置的仅iOS选项。
cameraDirection
BACK
选择要使用的相机(正面或背面)。
相机参数配置属性如下:
Camera.DestinationType (文件类型):属性值如下,
NameTypeDefaultDescription
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)
Camera.EncodingType (图片类型设置): 属性值如下,
NameTypeDefaultDescription
JPEG
number
0
返回JPEG编码的图像
PNG
number
1
返回PNG编码的图像
Camera.MediaType(媒体类型设置) : 属性值如下,
NameTypeDefaultDescription
PICTURE
number
0
只允许选择静止图像。默认。将返回通过DestinationType指定的格式
VIDEO
number
1
只允许选择视频,只返回网址
ALLMEDIA
number
2
允许从所有媒体类型中选择
Camera.PictureSourceType (图片来源设置): 属性值如下,
NameTypeDefaultDescription
PHOTOLIBRARY
number
0
从图片库中选择图片(与Android的SAVEDPHOTOALBUM相同)
CAMERA
number
1
从相机拍照
SAVEDPHOTOALBUM
number
2
从图片库中选择图片(与Android的PHOTOLIBRARY相同)
Camera.PopoverArrowDirection(匹配iOS UIPopoverArrowDirection常量以指定弹出窗口上的箭头位置。) : 属性值如下,
NameTypeDefault
ARROW_UP
number
1
ARROW_DOWN
number
2
ARROW_LEFT
number
4
ARROW_RIGHT
number
8
ARROW_ANY
number
15
Camera.Direction (相机摄像头设置): 属性值如下,
NameTypeDefaultDescription
BACK
number
0
使用背面照相机
FRONT
number
1
使用前置摄像头
例子:
//打开相机
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(''+error+'',['']);
}
},//相机参数配置
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, //不允许保存
};returnoptions;
},