ionic專案之ngcordova外掛之camera
阿新 • • 發佈:2019-01-02
參考文章
https://github.com/driftyco/ng-cordova
http://ngcordova.com/docs/plugins/camera/
官方解釋是既可以用來拍照也可以錄視訊(只試用了拍照功能)
首先,裝外掛 cordova plugin add org.apache.cordova.camera
然後,如果之前配置過ngcordova的話,就直接在控制器加上$cordovaCamera就好了
有兩種方法獲取拍照得到的圖片
1,拍照返回64位的圖片資料(destinationType: Camera.DestinationType.DATA_URL)
2,拍照返回圖片檔案的實際儲存地址(destinationType: Camera.DestinationType.FILE_URI)
1,拍照返回64位的圖片資料(成功了,可是圖片資料即使100%的質量也很不清晰)
var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error });
2,拍照返回圖片檔案的實際儲存地址(實驗不成功,暫沒找到問題)
var options = { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, }; $cordovaCamera.getPicture(options).then(function(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; }, function(err) { // error }); $cordovaCamera.cleanup().then(...); // only for FILE_URI
把這句話去了就正常了(暫時沒看到這句話有什麼影響) $cordovaCamera.cleanup().then(...);// only for FILE_URI
返回的圖片地址資訊為(file:///storage/emulated/0/DCIM/Camera/pic.jpg)與選取圖片檔案外掛方法返回的圖片地址(data/data下)不一樣