Anybody can give me some recommendation on how to crop a rotated image? Is there a straightforward way of implementing this using this library?
As a reference, find below my controller. It is used in a modal, which sends back the cropped imageURI through events to the parent controller. Before uploading, the parent controller converts back this image URI to a Blob and adds to the form. Hence, the most important result within the controller attached below is the image URL in $scope.$emit('finishedCrop', imgUrl);
.
Obviously, in the rotate()
function I could update the global file
, by converting the image URL to blob. Then, when $scope.finish
was called, the file that would be cropped would be the updated one (rotated). The problem is that this crashes on iOS8 (which apparently only supports square canvas aside from known image size issues). Anybody see another solution?
Note the file that comes from the parent controller in this case was already resized to comply with iOS issues. Cropping works when the image is not rotated.
Thanks in advance.
angular.module('ideas').controller('CropModalController', function($scope, $timeout, $modalInstance, Cropper) {
var data, file;
$scope.init = function() {
/**
* Croppers container object should be created in controller's scope
* for updates by directive via prototypal inheritance.
* Pass a full proxy name to the `ng-cropper-proxy` directive attribute to
* enable proxing.
*/
$scope.cropper = {};
$scope.cropperProxy = 'cropper.first';
// File comes from parent controller
file = $scope.$parent.imgFile;
Cropper.encode(file).then(function(dataUrl) {
$scope.dataUrl = dataUrl;
$timeout(showCropper); // wait for $digest to set image's src
});
};
$scope.rotate = function(angle) {
$scope.cropper.first('rotate', angle);
};
$scope.finish = function() {
// Resize image
Cropper.crop(file, data).then(Cropper.encode).then(function(imgUrl) {
$scope.$emit('finishedCrop', imgUrl);
$modalInstance.dismiss('cancel');
});
};
/**
* Object is used to pass options to initalize a cropper.
* More on options - https://github.com/fengyuanchen/cropper#options
*/
$scope.options = {
maximize: true,
aspectRatio: 4 / 3,
strict: false,
zoomable: false,
movable: false,
crop: function(dataNew) {
data = dataNew;
}
};
/**
* Showing (initializing) and hiding (destroying) of a cropper are started by
* events. The scope of the `ng-cropper` directive is derived from the scope of
* the controller. When initializing the `ng-cropper` directive adds two handlers
* listening to events passed by `ng-cropper-show` & `ng-cropper-hide` attributes.
* To show or hide a cropper `$broadcast` a proper event.
*/
$scope.showEvent = 'show';
$scope.hideEvent = 'hide';
function showCropper() {
$scope.$broadcast($scope.showEvent);
}
function hideCropper() {
$scope.$broadcast($scope.hideEvent);
}
});