Ionic系列——调用摄像头拍照和选择图库照片功能的实现

一、需求描述

    最近要作一个功能就是调用摄像头拍照，而后上传照片的功能，或者直接打开图库选择照片而后上传。

二、准备

    ①、添加插件$cordovaCamera

cordova plugin add cordova-plugin-camera

    ②、在controller中添加依赖

三、代码实现

$scope.takePhoto=function(){
    var options = {
                                                                 //这些参数可能要配合着使用，好比选择了sourcetype是0，destinationtype要相应的设置
        quality: 100,                                            //相片质量0-100
        destinationType: Camera.DestinationType.FILE_URI,        //返回类型：DATA_URL= 0，返回做为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)
        sourceType: Camera.PictureSourceType.CAMERA,             //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
        allowEdit: false,                                        //在选择以前容许修改截图
        encodingType:Camera.EncodingType.JPEG,                   //保存的图片格式： JPEG = 0, PNG = 1
        targetWidth: 200,                                        //照片宽度
        targetHeight: 200,                                       //照片高度
        mediaType:0,                                             //可选媒体类型：圖片=0，只容许选择图片將返回指定DestinationType的参数。 視頻格式=1，容许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，容许全部媒体类型的选择。
        cameraDirection:0,                                       //枪后摄像头类型：Back= 0,Front-facing = 1
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true                                   //保存进手机相册
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        CommonJs.AlertPopup(imageData);
        var image = document.getElementById('myImage');
        image.src=imageData;
        //image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // error
        CommonJs.AlertPopup(err.message);
    });

};

四、几点说明

    ①若是要保存照片，须要设置destinationType是返回图像路径，而后设置saveToPhotoAlbum: true，这两个参数都设置才能保存照片,我发现若是设置了长和宽保存的照片质量会不好，去掉的画质量不错。但我android会默认存到

file://storage/sdcard0/Pictures中，我手机相册没识别出来。并且这个时候虽然设置allowEdit: true，可是返回来的是源文件的路径，这个剪裁功能等于没有用。

    ②若是要截取图片，要设置allowEdit: true，设置长和宽，而且destinationType返回的是base64位编码字符串。

    ③当设置sourceType: Camera.PictureSourceType.CAMERA时，这个时候的选择图库的界面很难看，须要设置sourceType为0或者2这个时候调用的就是系统的图库，好看点。因此咱们实现拍照，而后在拍照的成功回调中调用打开相册选择图片，效果会好一点。

    ④长和宽的设置只影响剪裁框的大小，也就是若是返回base64会影响图片的大小，返回uri不会影响。

    ⑤设置成png比jpg的效果还差。

    ⑥当我设置Camera.DestinationType.NATIVE_URI，剪裁的时候返回之前照的同一张照片，可是放在image标签中的照片是最新的。后来我发现是这个问题致使的encodingType:Camera.EncodingType.PNG。

    ⑦这句话别人说是清理缓存用的，具体实现没用过，之后再研究吧

 $cordovaCamera.cleanup().then(...); // only for FILE_URI

    ⑧以后我会完善博客内容，当选择上传的时候弹出一个actionsheet，里面有选择图库，拍照等选项。上传的话能够直接把base64编码字符串直接传到后台处理，也能够用angular的上传，也能够用cordova-tranfer.

    ⑨调用前置摄像头一直不成功，只能手动切换。