1. 程式人生 > >ionic呼叫照相機或者從相簿中選擇圖片進行上傳

ionic呼叫照相機或者從相簿中選擇圖片進行上傳

開發App的時候會經常用到拍照上傳留作憑證,或者從相簿中選擇。
相關外掛:
相機:cordova-plugin-camera 2.4.1
相簿:cordova-plugin-image-picker 1.1.1
檔案:cordova-plugin-file
許可權:cordova-plugin-android-permissions 1.0.0
安裝許可權外掛主要是因為Android8.0以上的版本有許可權限制。

1 安裝外掛
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-image-picker
cordova plugin add cordova-plugin-file
cordova pluign add cordova-plugin-android-permissions

2 相關許可權程式碼:

function checkPermissions() {
    const permissions = cordova.plugins.permissions,
    permissionList = [permissions.CAMERA,           
    permissions.WRITE_EXTERNAL_STORAGE,
    permissions.INSTALL_LOCATION_PROVIDER];
    function errorCallbacks() {
      console.warn("permissions is not turned on");
    }
    function checkPermissionCallbacks(status) {
      if(!status.hasPermission) {
        permissions.requestPermissions(
          permissionList,
          status => {
            if(!status.hasPermission) errorCallbacks();
          },
          errorCallbacks);
      }
    }
    permissions.hasPermission(permissionList, checkPermissionCallbacks, null);
  }
  checkPermissions()

2 相關html程式碼

<button ng-click="useCamera()">呼叫攝像機</button>
<img src="" id="myImage"/>
<button class="button button-full button-calm"  ng-click="takePhoto1(str,data)">從相簿選擇</button>
<img src="{{mess}}" alt="">

3 相關controller 程式碼
拍照上傳

$scope.useCamera=function(){
   	    var options = {
            quality: 50,                  //照片質量
            destinationType: Camera.DestinationType.DATA_URL,   //base64編碼影象
            sourceType: Camera.PictureSourceType.CAMERA,     //影象來源
            allowEdit: true,   //是否允許編輯
            encodingType: Camera.EncodingType.JPEG, //儲存的圖片格式
            targetWidth: 100,     //最大寬度
            targetHeight: 100,   //最大高度
            popoverOptions: CameraPopoverOptions,    
            saveToPhotoAlbum: true     //是否儲存到相簿

        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
            var image = document.getElementById('myImage');
            image.src = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // error
        });
	}

從相簿中選擇

$scope.takePhoto1 = function(){//開啟相簿  
      var options = {  
        maximumImagesCount: 3,  
        width: 200,  
        height: 200,  
        quality: 100  
      };  
        
  $cordovaImagePicker.getPictures(options)  
    .then(function (results) {  
      // for (var i = 0; i < results.length; i++) {  
      //   var sss = $scope.getImageToBase64(results[i]);
      //   alert($scope.getImageToBase64(results[i]));
      //   $scope.img_src.push(sss); 
      // }  
        convertImgToBase64URL(results[0], function(base64Img){
            self.chosenImage = base64Img; 
            $scope.mess = self.chosenImage                               
        });  
    }, function(error) {  
        $scope.data.push(error);  
    });  
  
  }; 

轉化base64位

 function convertImgToBase64URL(url, callback, outputFormat){
        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
            var dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
            canvas = null; 
        };
        img.src = url;
    };