угловой JS обрезать изображение и разместить в базе данных

Question

Я хочу обрезать изображение и сохранить в базе данных. Я использую Angle JS с codeigniter. вот мой код

app.js

var app = angular.module('app', ['ui.bootstrap', 'ngImgCrop']);

app.controller("addticketController", function($scope, $http, $uibModal, $log, $scope, $http) {
    $scope.name = "World";
    $scope.items = ["item1", "item2", "item3"];

    $scope.animationsEnabled = true;

    $scope.open = function(size) {
        var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: "myModalContent.html",
            controller: "ModalInstanceCtrl",
            size: size,
            resolve: {
                items: function() {

                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(
            function(selectedItem) {
                $scope.selected = selectedItem;
                console.log($scope.selected);
            },
            function() {
                $log.info("Modal dismissed at: " + new Date());
            }
        );
    };

    $scope.toggleAnimation = function() {
        $scope.animationsEnabled = !$scope.animationsEnabled;
    };
    $scope.ticket = {};

    $scope.submitForm = function() {
        $http({
            method: "post",
            url: "/theticketsbay/sellerDashboard/addTicket/new_ticket",
            data: $scope.ticket, //forms user object
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
        }).then(
            function(data) {
                console.log(data);
                document.getElementById("message").textContent =
                    "You have login successfully with email " + data;
            },
            function(error) {}
        );
    };

})

app.controller('ModalInstanceCtrl', function($scope, $timeout, $uibModalInstance, items) {

    $scope.myCroppedImage = '';
    $scope.myImage = '';

    $scope.rectangleWidth = 100;
    $scope.rectangleHeight = 100;

    $scope.cropper = {
        cropWidth: $scope.rectangleWidth,
        cropHeight: $scope.rectangleHeight
    };

    var handleFileSelect = function(evt) {
        var file = evt.currentTarget.files[0];
        var reader = new FileReader();
        reader.onload = function(evt) {
            $scope.$apply(function($scope) {
                $scope.myImage = evt.target.result;
            });
        };
        reader.readAsDataURL(file);
    };
    $timeout(function() { 
        angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
    }, 1000, false);

    $scope.ok = function() {
        $uibModalInstance.close($scope.selected.item);
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
});

HTML

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Select An Image</h3>
        </div>
        <div class="modal-body">
            <div>Select an image file: <input type="file" id="fileInput"
                                              ng-model="ticket.icon" />
            </div>
            <div class="cropArea">
                <img-crop image="myImage" area-type="rectangle"
                          area-init-size="{
                             w:cropper.cropWidth,
                             h:cropper.cropHeight
                          }"
                          cropject="cropper"
                          result-image="myCroppedImage">
                </img-crop>
            </div>
            </td>
            <td>
                <div>Cropped Image:</div>
                <div><img ng-src="{{myCroppedImage}}" /></div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Browse</button>

пока я здесьЯ могу обрезать изображение, но когда я нажимаю кнопку ОК, это не работает, мне нужно загрузить изображение обрезки на base64 и опубликовать в моем php-контроллере вместе с другими данными. Также, когда я загружаю изображение, как отобразить изображение на той же HTML-странице