在 ionic 如何使用cordova 插件来访问相册 ，访问相机，拍照和录制视频
在 ionic 如何使用cordova 插件来访问相册 ，访问相机，拍照和录制视频
1.访问相册
(1).安装官方插件：http://ngcordova.com/docs/plugins/imagePicker/
[code lang="psd"] $ cordova plugin add https://github.com/wymsee/cordova-imagePicker.git [/code]
(2).查看安装插件：
[code lang="psd"] $ cordova plugin list [/code]
(3).调用插件中的方法：getPictures(options)
(4).参数说明：
| Options | Type | Detail |
| maximumImagesCount | Integer | 从相册选取照片的数量 |
| width | Integer | 图片的宽 |
| height | Integer | 图片的高 |
| quality | Integer | 图片的质量0 - 100 |
(5).具体代码：
[code lang="js"]
module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {
var options = {
maximumImagesCount: 10,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]); //返回照片的路径根据路径可以把照片显示出来或者上传照片看自己的需求
}
}, function(error) {
// error getting photos
});
});
[/code]
2.访问相机
(1).插件地址：http://ngcordova.com/docs/plugins/camera/
(2).安装插件：
[code lang="psd"] $ cordova plugin add https://github.com/apache/cordova-plugin-camera.git [/code]
(3).调用插件中的方法：$cordovaCamera.getPicture(options)
(4).参数说明:
| Options | Type | Detail |
|---|---|---|
| quality | Number |
Quality of the saved image, range of 0 - 100 |
| destinationType | Number |
Format of the return value |
| sourceType | Number |
Set the source of the picture |
| allowEdit | Boolean |
Allow simple editing of image before selection |
| encodingType | Number |
JPEG = 0, PNG = 1 |
| targetWidth | Number |
Width to scale image (pixels). Used with targetHeight |
| targetHeight | Number |
Height to scale image (pixels). Used with targetHeight |
| mediaType | String |
Set the type of media to select from |
| cameraDirection | Number |
Back = 0, Front-facing = 1 |
| popoverOptions | String |
iOS-only options that specify popover location in iPad |
| saveToPhotoAlbum | Boolean |
Save image to photo album on the device |
| correctOrientation | Boolean |
correct camera captured images in case wrong orientation |
(5).具体代码：
[code lang="js"]
module.controller('PictureCtrl', function($scope, $cordovaCamera) {
document.addEventListener("deviceready", function () {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
}, false);
});
[/code]
(6).获取文件的位置
[code lang="js"]
module.controller('PictureCtrl', function($scope, $cordovaCamera) {
document.addEventListener("deviceready", function () {
var options = {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}, function(err) {
// error
});
$cordovaCamera.cleanup().then(...); // only for FILE_URI
}, false);
});
具体用法看自己的需求
[/code]
3.录制视频
(1).插件地址：http://cordova.apache.org/docs/en/7.x/reference/cordova-plugin-media-capture/index.html#page-toc-source
(2).安装插件：
[code lang="psd"] $ cordova plugin add cordova-plugin-media-capture [/code]
(3).调用插件中的方法：
[code lang="psd"]
navigator.device.capture.captureAudio(
CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureAudioOptions options]
);
[/code]
(4).具体实现:
[code lang="js"]
module.controller('PictureCtrl', function($scope, $cordovaCamera) {
$scope.videoCapture = function() {
//开始录像（最长录制时间：15秒）
navigator.device.capture.captureVideo(onSuccess, onError, { duration: 120 });
//录制成功
function onSuccess(mediaFiles) {
var i, path, len;
//遍历获取录制的文件（iOS只支持一次录制一个视频或音频）
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
console.log(mediaFiles);
path = mediaFiles[i].fullPath;
$scope.vediopath = path;
console.log("视频url---" + $scope.vediopath);
}
$scope.vidio_list.push(path);
document.getElementById("typediv1").style.display = ""; //显示
// document.getElementById("typediv1").style.display="none";//隐藏
console.log('添加路径---' + $scope.vidio_list);
}
//录制失败
function onError(error) {
// alert('录制失败！错误码：' + error.code);
if (error.code === 3) {
$cordovaToast.show("取消录制", "short", "center");
}
}
}});
[/code]
完成。