1. 程式人生 > >ionic專案之ngcordova外掛之camera

ionic專案之ngcordova外掛之camera

參考文章

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下)不一樣