Cordova结合Vue学习Camera

艾学海
2023-12-01

简单聊两句

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

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> 

转载于:https://www.cnblogs.com/Free-Thinker/p/10762972.html

 类似资料: