html5 cordova打开手机摄像头,使用cordova，使html5也能像IOS，Android那样能够 调取手机的相机拍照功能...

一，咱们在使用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

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 (文件类型)：属性值以下，

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)

Camera.EncodingType (图片类型设置): 属性值以下，

Name

Type

Default

Description

JPEG

number

0

返回JPEG编码的图像

PNG

number

1

返回PNG编码的图像

Camera.MediaType(媒体类型设置) : 属性值以下，

Name

Type

Default

Description

PICTURE

number

0

只容许选择静止图像。默认。将返回经过DestinationType指定的格式

VIDEO

number

1

只容许选择视频，只返回网址

ALLMEDIA

number

2

容许从全部媒体类型中选择

Camera.PictureSourceType (图片来源设置): 属性值以下，

Name

Type

Default

Description

PHOTOLIBRARY

number

0

从图片库中选择图片(与Android的SAVEDPHOTOALBUM相同)

CAMERA

number

1

从相机拍照

SAVEDPHOTOALBUM

number

2

从图片库中选择图片(与Android的PHOTOLIBRARY相同)

Camera.PopoverArrowDirection(匹配iOS UIPopoverArrowDirection常量以指定弹出窗口上的箭头位置。) : 属性值以下，

Name

Type

Default

ARROW_UP

number

1

ARROW_DOWN

number

2

ARROW_LEFT

number

4

ARROW_RIGHT

number

8

ARROW_ANY

number

15

Camera.Direction (相机摄像头设置): 属性值以下，

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(''+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;

},