Cropping is working perfectly, but get blank space in image, i don't want that

[Jihin Raju]

Like this, how to remove this, open image in new tab

[Honchar Denys]

this has been solved here: https://github.com/CrackerakiUA/ui-cropper

[Jihin Raju]

same issue in ui-cropper

angular.module('abc').directive('imageCrop', ['$uibModal', function ($uibModal) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            outputFile: "=",
            resultImage: "=",
            onChange: "&"
        },
        templateUrl: 'directive/image-crop/image-crop.html',
        link: function (scope, element, attrs, fn) {

            var fileName = 'fileName.jpeg';
            var fileType = "image/jpeg";
            var file;
            scope.modalContent = {};
            scope.modalContent.areaType = attrs.areaType || 'circle';
            scope.blockingObject = { block: true };
            

            function modalInstances() {
                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'myModalContent.html',
                    controller: ['$scope', '$uibModalInstance', 'content', function ModalInstanceCtrl($scope, $uibModalInstance, content) {
                        $scope.content = content;
                        $scope.myCroppedImage = '';
                        $scope.ok = function () {
                            $uibModalInstance.close({ image: $scope.myCroppedImage, blob: $scope.croppedFile });
                        };
                        $scope.cancel = function () {
                            $uibModalInstance.dismiss('cancel');
                        };


                    }],
                    size: "sm",
                    backdrop: 'static',
                    keyboard: true,
                    resolve: {
                        content: function () {
                            return scope.modalContent;
                        }
                    }
                });
                modalInstance.result.then(function (data) {
                    scope.outputFile = new File([data.blob], fileName, { type: fileType });
                    scope.resultImage = data.image;
                    if (scope.onChange) {
                        setTimeout(function () {
                            scope.onChange(scope.outputFile);
                        }, 500);
                    }
                }, function () {

                });
            }

            var handleFileSelect = function (evt) {
                var file = evt.currentTarget.files[0];
                fileName = file.name;
                fileType = file.type;
                var reader = new FileReader();
                reader.onload = function (evt) {
                    scope.$apply(function (scope) {
                        scope.modalContent.myImage = evt.target.result;
                        modalInstances();
                    });
                };
                reader.readAsDataURL(file);
            };
            angular.element(document.querySelector('#' + attrs.fileInput)).on('change', handleFileSelect);
        }
    };
}]);

<div class="modal-body cropArea">
        <ui-cropper
            image="content.myImage"
            
            result-image="myCroppedImage"
            area-type="rectangle"
            live-view="blockingObject"
            result-blob="croppedFile"
        ></ui-cropper>
    </div>

[Honchar Denys]

few days ago, one guy did PR which solve this, please search there.

[Jihin Raju]

PR ?

[Honchar Denys]

pull request :)

[Jihin Raju]

How to get that fixed version code ?

[Honchar Denys]

try latest version of ui-cropper