Cordova結合Vue學習Camera

時間 2020-05-22

標籤 cordova 結合 vue 學習 camera 欄目 Cordova 简体版

原文原文鏈接

簡單聊兩句

學習Vue+Cordova打包編譯App，首先你要安裝Cordova與vue，在這裏本人就不說明了，自行看文檔與搜索相關資料。javascript

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

navigator.camera.getPicture是調用camera的方法，他會附帶三個參數，cameraSuccess是提供圖像數據的回調函數。，cameraError是提供錯誤消息的回調函數，CameraOptions是可選參數來自定義相機設置參數（對象類型）。vue

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); }, },

上面的代碼是整個調用的過程，注意下圖是自定義相機設置參數的詳細屬性鍵值對說明java

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文件，仿照下圖設置，便可。android

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項目中依次執行webpack

cordova plugin cordova-plugin-cameraweb

cordova platform add android@6.2.0npm

注意：這裏爲何要添加安卓平臺6.2.0呢，由於目前cordova-plugin-camera插件須要的安卓平臺是小與6.3.0的，而你默認的添加的就是6.3.0。app

第四步使用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>