2017-02-08 4 views
0

Я хочу показать изображение, взятое из камеры или выбранное из галереи, после сохранения изображения в файловой системе, а затем успешно вставлять URL-адрес изображения в базу данных sqlite, я не могу найти способ отображения это, я попытался код ниже, только вставить путь IMG до сих порКак сохранить путь изображения в sqlite cordova

var db = null; 
angular.module('starter', ['ionic', 'ngCordova'])  
    .run(function($ionicPlatform, $cordovaSQLite) {     
     $ionicPlatform.ready(function() {       
      try {         
       db = $cordovaSQLite.openDB({           
        name: "my.db", 
                  location: 'default'         
       });         
       $cordovaSQLite.execute(db,"CREATE TABLE IF NOT EXISTS imageTable " + "(id integer primary key, image text)");       
      } catch (e) {         
       alert(e);       
      } finally {       } 

      if (window.cordova && window.cordova.plugins.Keyboard) { 

       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 


       cordova.plugins.Keyboard.disableScroll(true); 
      } 
      if (window.StatusBar) { 
       StatusBar.styleDefault(); 
      } 
     }); 
    }) 



    .controller('ImageCtrl', function($scope, $rootScope, $state, $stateParams, $cordovaDevice, $cordovaFile, $ionicActionSheet, $cordovaCamera, $cordovaFile, $cordovaDevice, $ionicPopup, $cordovaActionSheet, $cordovaSQLite, $interval) { 




     var imagesP = []; 

     //$scope.images = []; 


     $scope.showAlert = function(title, msg) { 
      var alertPopup = $ionicPopup.alert({ 
       title: title, 
       template: msg 
      }); 
     }; 


     $scope.loadImage = function() { 

      var options = { 
       title: 'Select Receipts Image ', 
       buttonLabels: ['Gallery', 'Take photo', 'File System'], 
       addCancelButtonWithLabel: 'Cancel', 
       androidEnableCancelButton: true, 
      }; 
      $cordovaActionSheet.show(options).then(function(btnIndex) { 
       var type = null; 
       if (btnIndex === 1) { 
        type = Camera.PictureSourceType.PHOTOLIBRARY; 
       } else if (btnIndex === 2) { 
        type = Camera.PictureSourceType.CAMERA; 
       } 
       if (type !== null) { 
        $scope.selectPicture(type); 
       } 
      }); 
     } 




     // Take image with the camera or from library and store it inside the app folder 
     // Image will not be saved to users Library. 
     $scope.selectPicture = function(sourceType) { 


      var options = { 
       quality: 75, 
       destinationType: Camera.DestinationType.FILE_URI, 
       sourceType: sourceType, 
       allowEdit: true, 
       encodingType: Camera.EncodingType.JPEG, 
       correctOrientation: true, 
       targetWidth: 800, 
       targetHeight: 800, 
       popoverOptions: CameraPopoverOptions, // for IOS and IPAD 
       saveToPhotoAlbum: false 
      }; 

      $cordovaCamera.getPicture(options).then(function(imagePath) { 
        // Grab the file name of the photo in the temporary directory 
        var currentName = imagePath.replace(/^.*[\\\/]/, ''); 
        // alert(currentName); 

        //Create a new name for the photo to avoid duplication 
        var d = new Date(), 
         n = d.getTime(), 
         newFileName = n + ".jpg"; 
        //alert(newFileName); 
        // If you are trying to load image from the gallery on Android we need special treatment! 
        if ($cordovaDevice.getPlatform() == 'Android' && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) { 
         window.FilePath.resolveNativePath(imagePath, function(entry) { 
          window.resolveLocalFileSystemURL(entry, success, fail); 

          function fail(e) { 
           console.error('Error: ', e); 
          } 

          function success(fileEntry) { 
           var namePath = fileEntry.nativeURL.substr(0, fileEntry.nativeURL.lastIndexOf('/') + 1); 
           // Only copy because of access rights 
           $cordovaFile.copyFile(namePath, fileEntry.name, cordova.file.dataDirectory, newFileName).then(function(success) { 
            // $scope.image = newFileName; 
            var imgPath = cordova.file.dataDirectory + newFileName; 

            imagesP.push(imgPath); 
            $scope.add(imagesP); 




           }, function(error) { 
            $scope.showAlert('Error', error.exception); 
           }); 
           //  alert(fileEntry.nativeURL); 

          }; 
         }); 
        } else { 
         var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1); 
         // Move the file to permanent storage 
         $cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function(success) { 
          // $scope.image = newFileName; 
          //$scope.images.push(newFileName); 
          var image = cordova.file.dataDirectory + newFileName; 
          $scope.add(image); 




         }, function(error) { 
          $scope.showAlert('Error', error.exception); 
         }); 

        } 
       }, 
       function(err) { 
        // Not always an error, maybe cancel was pressed... 
       }) 
     }; 

     $scope.add = function(imagesP) {              
       if (imagesP != null) {           
        $cordovaSQLite.execute(db, "INSERT INTO imageTable (images) VALUES(?)", [imagesP] );         
       }         
       alert("Inserted.");       
      }, 
      function(e) {         
       alert(e);       
      }; 

     $scope.delete = function(id) {                 
       if (id != '') {           
        $cordovaSQLite.execute(db, DELETE FROM imageTable WHERE id=?", [id]);         
       }         
       alert("Deleted.");         
       $scope.ShowAllData();       
      }, 
      function(e) {         
       alert(e);       
      };     

        
     $scope.ShowAllData = function() { /* SELECT COMMAND */        
      $scope.images = [];       
      $cordovaSQLite.execute(db,"SELECT images FROM imageTable").then(function(res) {           
       if (res.rows.length > 0) {             
        for (var i = 0; i < res.rows.length; i++) {               
         $scope.images.push({                 
          id: res.rows.item(i).id, 
          image: res.rows.item(i).images 

                         
         });             
        }           
       }         
      },         function(error) {           
       alert(error);         
      }      ); 

        
      return $scope.images;     
     }  
     //$scope.ShowAllData(); 
       
     //$interval($scope.ShowAllData, 2000,1); 
             




     // Returns the local path inside the app for an image 
     $scope.pathForImage = function() { 

      return cordova.file.dataDirectory + $scope.ShowAllData(); 



     }; 

    }); 

HTML

<body ng-app="starter" ng-controller="ImageCtrl"> 
    <ion-pane> 
     <ion-header-bar class="bar-positive"> 
      <h1 class="title"> Image Upload</h1> 
     </ion-header-bar> 
     <ion-content ng-repeat="image in images"> 
      <img ng-src="{{image.image}}" style="width: 100%; height: 100%;"> 
     </ion-content> 
     <ion-footer-bar class="bar bar-positive"> 
      <div class="button-bar"> 
       <button class="button icon-left ion-camera" ng-click="loadImage()">Take Photo</button> 
       <button class="button icon-left ion-camera" ng-click="ShowAllData()">show Photo</button> 


      </div> 
     </ion-footer-bar> 
    </ion-pane> 
</body> 

ответ

0

вы можете просмотреть изображение, установив DestinationType в Camera.DestinationType.DATA_URL

 var options = { 
      quality: 75, 
      destinationType: Camera.DestinationType.DATA_URL, 
      sourceType: sourceType, 
      allowEdit: true, 
      encodingType: Camera.EncodingType.JPEG, 
      correctOrientation: true, 
      targetWidth: 800, 
      targetHeight: 800, 
      popoverOptions: CameraPopoverOptions, // for IOS and IPAD 
      saveToPhotoAlbum: false 
     }; 

и обратного вызова, использовать

"данные: изображения/JPEG; base64," + ImageData;

как этот

$cordovaCamera.getPicture(options).then(function(imagePath) { 

    var currentImage = "data:image/jpeg;base64," +imagePath; 

}); 
+0

Я хочу просмотреть мой IMG из БД SQL, а не камеры –

+0

вы можете сохранить «currentImage» значение в дБ .. а затем предварительный просмотр, извлекая из БД –

+0

я уже спасен это, как я могу его просмотреть! проверьте мой код пожалуйста. –

Смежные вопросы