Cordova结合Vue学习Camera

简单聊两句

学习Vue+Cordova打包编译App，首先你要安装Cordova与vue，在这里本人就不说明了，自行看文档与搜索相关资料。

第一步：首先在vue代码中加入cordova-plugin-camera的调用方法

navigator.camera.getPicture是调用camera的方法，他会附带三个参数，cameraSuccess是提供图像数据的回调函数。，cameraError是提供错误消息的回调函数，CameraOptions是可选参数来自定义相机设置参数（对象类型）。

 methods: {

    //显示选择框事件

    selectcamera: function() {

      return this.sheetVisible=true;

    },

    //调用拍照

    camera:function(){

      //拍照设置参数

      var cameraOptions={

        quality: 50,

        sourceType:1,

        destinationType: Camera.DestinationType.FILE_URI,

      };

      //此处是官网提供的调用方法

      navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions);

    },

    //调用相册

    photo:function(){

      //拍照设置参数

      var cameraOptions={

        quality: 50,

        sourceType:0,

        destinationType: Camera.DestinationType.FILE_URI,

      };

      navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions);

    },

    //调取成功触发事件

    cameraSuccess:function(imageData){

      return this.image=imageData;

    },

    //调取失败触发事件

    cameraError:function(message){

      alert(message);

    },

  },

上面的代码是整个调用的过程，注意下图是自定义相机设置参数的详细属性键值对说明

var cameraOptions = {

      //这些参数可能要配合使用，如选择了sourcetype是0，destinationtype要相应的设置为1：【返回文件的URI(content://media/external/images/media/2 for Android)】

      quality: 50,                                            //相片质量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: true,                                        //在选择之前允许修改截图

      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,                   //CameraPopoverOptions,iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数

      saveToPhotoAlbum: true                                  //保存进手机相册

  };

第二步使用Vue打包到Cordova生成的项目中

首先你要改vue项目中config/index.js，修改其中的build打包模块，设置成打包到cordova生成的项目目录中的www文件，仿照下图设置，即可。

build: {

    // Template for index.html

    index: path.resolve(__dirname, '../../my_app1/www/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../../my_app1/www'),

    assetsSubDirectory: '',

    assetsPublicPath: '',

    /**

     * SourceMap

    */

    productionSourceMap: false,

    // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  }

}

第三步使用Cordova安装cordova-plugin-camera插件与添加安卓平台,

进入Cordova项目中依次执行

cordova plugin cordova-plugin-camera

cordova platform add android@6.2.0

注意：这里为什么要添加安卓平台6.2.0呢，因为目前cordova-plugin-camera插件需要的安卓平台是小与6.3.0的，而你默认的添加的就是6.3.0。

第四步使用Android studio 进行真机调试即可

这里就不具体写详细步骤了，这里会发现一个问题，再无任何报错的且代码都正常的时候，无法调用cordova-plugin-camera，

解决办法，要在vue项目中index.html中添加一个js，然后再重复上面步骤，应该就会解决此问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

  <title>vueapp2</title>

</head>

 <script src="cordova.js"></script>

<body>

  <div id="app">

  </div>

  <!-- built files will be auto injected -->

</body>

</html>