Cropping is working perfectly, but get blank space in image, i don't want that
jihin opened this issue · 7 comments
jihin commented
CrackerakiUA commented
this has been solved here: https://github.com/CrackerakiUA/ui-cropper
jihin commented
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>
CrackerakiUA commented
few days ago, one guy did PR which solve this, please search there.
jihin commented
PR ?
CrackerakiUA commented
pull request :)
jihin commented
How to get that fixed version code ?
CrackerakiUA commented
try latest version of ui-cropper