Vue项目使用Cordova实现调取原生摄像头并实现裁剪功能

1.新建Cordova项目，在项目目录里添加插件

cordova plugin add cordova-plugin-camera 

cordova plugin add --save cordova-plugin-crop

 

2. 在Vue项目的index.html中引入Cordova.js并添加设备监听函数

注：npm  run  dev的时候要把引入和监听函数注释掉，因为这样在PC端跑不起来，在手机里才可以。

 

3.在需要调取摄像头的地方加入代码

比如我在一个“打开相机”的按钮上点击事件绑定了一个函数，叫getCamera，代码如下

    getCamera: function(){
        //打开照相机
        navigator.camera.getPicture(function(imageURI){
                    //打开摄像头成功的回调
                  plugins.crop(function success (imageURI) {
                    //裁剪成功的回调
                    console.log(imageURI)
                }, function fail () {
                    //裁剪失败的回调
                }, imageURI,  {quality: 30})  //quality为照片质量
            },function(){
                //打开摄像头失败的回调
            }, {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI 
        });

    }

 

详解：

只打开摄像头的函数为

navigator.camera.getPicture(function(imageURI){
        console.log(imageURI)
    },function(err){
        console.log(err)
    },
    {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI 
    } 
})

第一个参数是打开成功执行的函数，

第二个参数是打开失败执行的函数，

第三个参数是一个对象，可选参数有：

quality：照片质量，Number类型，可选1-100

 

Camera.DestinationType：相机返回的图片格式：

        1. DATA_URL     返回图片Base64

        2. FILE_URI        返回图片原生的URI路径（安卓）

        3. NATIVE_URI        返回图片原生的URI路径（IOS）

 

Camera.PictureSourceType：选择图片的方式

        1. PHOTOLIBRARY     打开相册获取（安卓）

        2. CAMERA      打开相机拍照

        3. SAVEDPHOTOALBUM       打开相册获取（IOS）

 

Camera.MediaType：选择的图片类型

        1. PICTURE        只许选择图片

        2. VIDEO        只许选择视频

        3. ALLMEDIA      可以选择全部格式

 

 

裁剪照片的函数为：

plugins.crop(function success (imageURI) {
        //裁剪照片，成功后的回调
        console.log(imageURI)
    }, function fail (err) {
        console.log(imageURI)
    }, imageURI,
    { quality: 30 }
)

第一个参数：执行成功的回调

第二个参数：执行失败的回调

第三个参数：图片路径。（注：裁剪插件的输入路径只能是图片的本地路径，Base64是不可以的，并且输出路径也是本地路径，如果需要Base64格式需要再转化）

第四个参数：对象，可选参数没啥，基本就只有quality这个有用。

 

 

 

不要觉得年纪轻轻就到了低谷，人生还有很大的下降空间。