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>
