一、cordova-plugin-camera提供照相机API与设备相机进行交互。
通过API我们可以拍摄或访问照片库中的照片,返回图片的base64编码字符串或者图片的url文件路径。
二.安装命令:
cordova plugin add cordova-plugin-camera
官当文档:
http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#module_Camera.Direction
三.API和相关对象
1.navigator.camera.getPicture(onSuccess,onError,opiotns) 从相机或图片库获取
2.navigator.camera.cleanup(onSuccess,onError) 移除掉图像文件调用camera.getPicture所保存的临时存储空间。
3.CameraOptions 相机设置的可选参数
扫描二维码关注公众号,回复:
900968 查看本文章
名字 |
类型 |
默认值 |
描述 |
quality |
number | 50 | 图像的保存质量,范围0-100,100是最大值,最高的分辨率,没有任何压缩损失(请注意有关该相机的分辨率信息不可用。) |
destinationType | DestinationType | FILE_URI | 选择返回值的格式 |
sourceType | PictureSourceType | CAMERA | 获取图片的来 |
allowEdit | Boolean | true | 允许在选择图片之前进行简单的编辑 |
encodingType | EncodingType | JPEG | 选择图像的返回编码 |
targetWidth | number | 宽度像素用来缩放图像。必须和targetHeight一起使用。宽高比保持不变。 | |
targetHeight | number | 高度像素用来缩放图像。必须和targetWidth一起使用。宽高比保持不变 | |
mediaType | MediaType | PICTURE | 选择media类型。它只适用PictureSourceType是PHOTOLIBRARY或SAVEDPHOTOALBUM |
correctOrientation | Boolean | 如果是横向拍摄的照片,会自动旋转到正确的方向 | |
saveToPhotoAlbum | Boolean | 设备拍照后的图像是否保存的图片库中 | |
popoverOptions | CameraPopoverOptions | 仅ios可用,设定在ipad的popover的位置 | |
cameraDirection | Direction | BACK | 选择前置摄像头还是后置摄像头 |
Camera.DestinationType :返回数据类型
特性:
变量名 | 类型 | 默认值 | 描述 |
DATA_URL | number | 0 | 返回Base64编码的字符串 |
FILE_URI | number | 1 | 返回文件的URI(content://media/external/images/media/2 for Android) |
NATIVE_URI | number | 2 | 返回原生URI (eg. asset-library://... for iOS) |
特性:
变量名 | 类型 | 默认值 | 描述 |
JPEG | number | 0 | 返回JPEG的图片 |
PNG | number | 1 | 返回PNG的图片 |
Camera.MediaType :获取的媒体格式,图片/视频
特性:
变量名 | 类型 | 默认值 | 描述 |
PICTURE | number | 0 | 仅允许选择静态影像。 默认。将通过DestinationType返回指定格式 |
VIDEO | number | 1 | 仅允许选择视频,只返回网址 |
ALLMEDIA | number | 2 | 允许返回所有媒体格式 |
Camera.PictureSourceType :媒体来源,相册/拍照
特性:
变量名 | 类型 | 默认值 | 描述 |
PHOTOLIBRARY | number | 0 | 从设备相册选择图片 |
CAMERA | number | 1 | 用摄像头拍摄图片 |
SAVEDPHOTOALBUM | number | 2 | 从设备相册选择图片(一个应该是ios一个安卓) |
Camera.PopoverArrowDirection :枚举 匹配的iOS UIPopoverArrowDirection在popover固定的箭头位置。
类型:相机的静态枚举属性
特性:
变量名 | 类型 | 默认值 |
ARROW_UP | number | 1 |
ARROW_DOWN | number | 2 |
ARROW_LEFT | number | 4 |
ARROW_RIGHT | number | 8 |
ARROW_ANY | number | 15 |
Camera.Direction :前后摄像头指定
特性:
变量名 | 类型 | 默认值 | 描述 |
BACK | number | 0 | 使用后置摄像头 |
FRONT | number | 1 | 使用前置摄像头 |
CameraPopoverOptions
iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数。需要注意的是popover的尺寸可以改变,以适应屏幕的箭头和取向方向。确保指定元素位置时考虑方向变化。
四、获取图片示例
变量名 | 类型 | 默认值 | 描述 |
[x] | number | 0 | 屏幕选取框的x坐标 |
[y] | number | 32 | 屏幕选取框的y坐标 |
[width] | number | 320 | 屏幕选取框的宽度 |
[height] | number | 480 | 屏幕选取框的高度 |
[arrowDir] | PopoverArrowDirection | ARROW_ANY | 确定popover的指向 |
1.从相册获取DATA_URL类型
navigator.camera.getPicture(onSuccess, onError, { quality: 50, destinationType: Camera.DestinationType.DATA_URL,//返回Base64编码字符串 sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,//指定图片来自相册 encodingType: Camera.EncodingType.JPEG, //指定返回图片是png格式还是jpeg }); function onSuccess(data) { alert(data.length); var result = "data:image/jpeg;base64," + data; app.url1 = result; document.getElementById('imgOne').src = result; } function onError() { alert('获取失败'); }2.从拍照获取图片File_Uri路径
navigator.camera.getPicture(onSuccess, onError, { quality: 50, destinationType: Camera.DestinationType.FILE_URI,//返回FILE_URI类型 sourceType: Camera.PictureSourceType.CAMERA,//指定图片来自拍照 cameraDirection: Camera.Direction.FRONT,//指定前后摄像头--好像没起作用 targetWidth: 300, targetHeight: 300 //encodingType: Camera.EncodingType.PNG //指定返回图片是png格式还是jpeg }); function onSuccess(data) { alert(data); app.url2 = data; document.getElementById('imgTwo').src = data; } function onError() { alert('获取失败'); }
更多:
cordova-plugin-device-motion加速计和cordova-plugin-device-orientation设备方向