从Ionic中的图库或相机中选择图像并将其加载到ImageView中

时间:2016-11-14 06:55:45

标签: android angularjs cordova ionic-framework hybrid

我是混合移动应用的新手,我想在我的应用中实现个人资料图片更新。直到现在我已经实现了以下内容。单击Imageview时会弹出一个对话框,要求您选择应用程序(图库或相机)。选择所需的应用程序后,我可以转到相应的应用程序并选择图像。但我在某些方面陷入困境,我不知道如何用新内容替换我的样本imageview。以下是我的代码

profile.html

<ion-view class="profile-view">
<ion-nav-title>
    <span>Profile</span>
</ion-nav-title>
<ion-content>
    <div class="top-content row">
        <div class="profile-container">
            <div class="user-image-container">
                <pre-img ratio="_1_1" helper-class="rounded-image">
                    <img class="user-image" ng-src="http://115.115.122.10/vishnu/image/sample.png" ng-click="confirmDialog()"  spinner-on-load>
                </pre-img>
            </div>
            <div class="user-name">Brynn Evans</div>
            <div class="user-twitter">@brynn</div>
        </div>
        <div class="user-background-image-outer">
            <div multi-bg="['http://115.115.122.10/vishnu/image/sample.png']"></div>
        </div>
    </div>
    <div class="bottom-content">
        <div class="user-bio">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</ion-content>

controller.js

    .controller('ProfileCtrl', function ($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $ionicActionSheet, ImageService, FileService, $ionicPopup, $cordovaDialogs) {
    $ionicPlatform.ready(function() {
        $scope.images = FileService.images();

        $scope.$apply();
    });

    $scope.addpicture = function() {
        $scope.hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: 'Take photo' },

              { text: 'Photo from library' }
            ],
            titleText: 'Add images',
            cancelText: 'Cancel',
            buttonClicked: function(index) {
                $scope.addImage(index);
            }
        });
    }

    $scope.showAlert = function () {

        var alertPopup = $ionicPopup.alert({

            buttons: [
              {
                  text: 'Take photo',
                  onTap: function (index) {  $scope.addImage(index) }
              },
              {
                  text: 'Photo from library',
                  onTap: function (index) { $scope.addImage(index) }
              },
               {
                   text: 'Cancel',
                   onTap: function (alertPopup) { popup.close(); }
               }
            ],

            title: 'Add Images',

        });


    }

    $scope.confirmDialog = function() {
        navigator.notification.confirm("Choose your app to perform the action", function (buttonIndex) {
             var btnIndex = buttonIndex;
             switch (btnIndex) {
                case 1:
                    $scope.addImage(btnIndex);
                    break;
                case 2:
                    $scope.addImage(btnIndex);                  
                    break;

            }
        }, "Change Profile Picture", ["Take photo", "Photo From Library"]);
    }




    $scope.addImage = function(type) {
        ImageService.handleMediaDialog(type).then(function() {
            $scope.$apply();
        });
    }

})

services.js

    .factory('FileService', function () {
    var images;
    var IMAGE_STORAGE_KEY = 'dav-images';

    function getImages() {
        var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
        if (img) {
            images = JSON.parse(img);
        } else {
            images = ['http://115.115.122.10/vishnu/image/sample.png'];
        }
        return images;
    };

    function addImage(img) {
        images.push(img);
        window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images));
    };

    return {
        storeImage: addImage,
        images: getImages
    }
})

.factory('ImageService', function ($cordovaCamera, FileService, $q, $cordovaFile) {

    function optionsForType(type) {
        var source;
        switch (type) {
            case 2:
                source = Camera.PictureSourceType.PHOTOLIBRARY;
                break;
            case 1:
                source = Camera.PictureSourceType.CAMERA;
                break;
        }
        return {
            quality: 90,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: source,
            allowEdit: false,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false,
            correctOrientation: true
        };
    }

    function saveMedia(type) {
        return $q(function (resolve, reject) {
            var options = optionsForType(type);

            $cordovaCamera.getPicture(options).then(function (imageBase64) {
                FileService.storeImage(imageBase64);
            });
        })
    }
    return {
        handleMediaDialog: saveMedia
    }
})

任何人都可以帮我实现我的功能。

提前致谢

0 个答案:

没有答案