Ионные/Кордовы: Загрузить изображение из галереи телефона

Question

Я бы хотел, чтобы у пользователя была возможность сделать снимок или выбрать картинку из галереи своего телефона.

Я с успехом делаю снимок и получаю imageURI.

Я использую Genymotion как эмулятор, так как мне нужно получить доступ к некоторым функциям, таким как камера. Я знаю, что есть и другие решения. Это немного сложно отлаживать во время эмуляции, но это единственный способ найти доступ к камере. Поэтому я не вижу, что происходит во второй части (выберите изображение из галереи).

$scope.uploadPopup = function() { 
    var uploadPopup = $ionicPopup.show({ 
     title: "Edit profile's picture", 
     templateUrl: 'templates/partials/upload-img.html', 
     buttons: [ 
      { 
       text: '', 
       type: 'button-energized icon-center ion-ios7-camera', 
       onTap: function(e) { 

        // e.preventDefault() will stop the popup from closing when tapped. 
        e.preventDefault(); 
        alert('Getting camera'); 
        Camera.getPicture({ 
         quality: 100, 
         saveToPhotoAlbum: false 
        }).then(function(imageURI) { 
         alert(imageURI); 
         $scope.lastPhoto = imageURI; 
        }, function(err) { 
         alert(err); 
        }); 

       } 
      }, 
      { 
       text: 'From gallery', 
       type: 'button', 
       onTap: function(e) { 
        e.preventDefault(); 
        alert('Getting gallery'); 
        Camera.getPicture({ 
         quality: 100, 
         sourceType: Camera.PictureSourceType.PHOTOLIBRARY 
        }).then(function(imageURI) { 
         alert(imageURI); 
         $scope.lastPhoto = imageURI; 
        }, function(err) { 
         alert(err); 
        }); 
       } 
      } 
     ] 
    }); 
}; 

Услуги:

app.factory('Camera', ['$q', function($q) { 

    return { 
    getPicture: function(options) { 
     var q = $q.defer(); 

     navigator.camera.getPicture(function(result) { 
     // Do any magic you need 
     q.resolve(result); 
     }, function(err) { 
     q.reject(err); 
     }, options); 

     return q.promise; 
    } 
    } 

}]); 

Является ли это правильный способ сделать? Любые намеки или идеи?

UPDATE:

Когда я добавить:

sourceType: Camera.PictureSourceType.CAMERA 

к первой функции (сделать снимок с камеры). Он больше не работает. Несмотря на отсутствие (возможно, по умолчанию), он работает.

Answer 1

Когда я добавил SourceType вместо использования SourceType по умолчанию (CAMERA)

sourceType: Camera.PictureSourceType.CAMERA 

Он не работал больше, так что я догадался, что-то здесь было неправильно.

Правильный синтаксис:

navigator.camera.PictureSourceType.CAMERA 

ИЛИ (с различной опции):

navigator.camera.PictureSourceType.PHOTOLIBRARY 

Не знаю, почему "navigator.camera", а не "Камера", я предполагаю «Камера» - это псевдоним «navigator.camera».

Answer 2

Я думаю, что ваш код на правильном пути, как вы сказали, трудно сказать, не имея возможности проверить его на устройстве. Поэтому я могу вам помочь. go grab the intel xdk https://software.intel.com/en-us/html5/tools. импортируйте свой ионный проект, а затем создайте учетную запись. после входа в систему перейдите на вкладку «Тест» и нажмите приложение на тестовый сервер. Затем установите предварительный просмотр приложения на вашем телефоне/планшете (на Android и ios). откройте приложение, войдите в систему и удалите серверные приложения внизу, вы увидите свое приложение и сможете запустить его на своем телефоне. Вы также можете использовать intel xdk для запуска приложения на своем телефоне с живой отладкой. Надеюсь это поможет! ура!

Вот код для моего ngCordova плагина:

//opens up the phones camera in order to take a picture 
     //requires module ngCordova and the method $cordovaCamera 
     //sets Data.Image to a base 64 string 
     $scope.takePhoto = function() { 
      document.addEventListener("deviceready", function() { 
       var options = { 
        quality: 100, 
        destinationType: Camera.DestinationType.DATA_URL, 
        sourceType: Camera.PictureSourceType.CAMERA, 
        allowEdit: false, 
        encodingType: Camera.EncodingType.PNG, 
        targetWidth: 800, 
        targetHeight: 1100, 
        popoverOptions: CameraPopoverOptions, 
        saveToPhotoAlbum: false 
       }; 
       $cordovaCamera.getPicture(options).then(function (imageData) { 

        $scope.image = "data:image/png;base64," + imageData; 
       }, function (err) { 
        // error 
       }); 
      }, false); 
     };