koorgoo / ngcropper Goto Github PK

Hi - if you could please add a license file, that will be great.

package.json file is invalid, which prevents lib from being installed through npm (as external lib referenced by git url).

Hi,

I have an issue when I use the ng-cropper directive. It returns an error

error, element.cropper in not a function

I tried to patch the sources and put jQuery(element) instead of element at lines 2115 and 2123 and it works now. Did I make a mistake ?

My javascript code:

$scope.cropper = {};
$scope.cropperProxy = 'cropper.first';
$scope.options = {
	maximize: true,
	aspectRatio: 2 / 1,
	crop: function(dataNew) {
		data = dataNew;
	}
};
$scope.show_cropper = function() {
	$scope.$broadcast('cropper:show');
}

$scope.on_logo_file = function(data) {
	Cropper.encode((file = data)).then(function(dataUrl) {
		$scope.logoUrl = dataUrl;
		$timeout($scope.show_cropper);  // wait for $digest to set image's src
	});
}

My includes

<script src="node_modules/jquery/dist/jquery.js"></script>
<!--<script src="node_modules/cropper/dist/cropper.js"></script>-->
<script src="node_modules/ngCropper/dist/ngCropper.all.js"></script>

My html

<div>
	<input type="file" onchange="angular.element(this).scope().on_logo_file(this.files[0])">
	<div>
		<img
		style="max-width:100%"
		ng-cropper
		ng-cropper-proxy="cropperProxy"
		ng-cropper-show="'cropper:show'"
		ng-cropper-hide="'cropper:hide'"
		ng-cropper-options="options"
		ng-src="{{logoUrl}}"/>
	</div>
</div>

Thanks !

Hi there!
I'm adapting the cropper to work in my app and was wondering if you implemented any kind of method to upload the resulting selection to the server. Or should I just call https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions ?
Thanks in advance!

in the demo code, after we have loaded an image and try to load a new image, it doesn't work.

Hi, Can anybody tell how to change the aspectRatio on button click. Since I want to have different aspect ratio like it is in the https://fengyuanchen.github.io/cropper/. Is there any way I can achieve it through through angularjs.

Hi,
I need to integrate this in my android project.so wanted to know is this compatible on the android devices

Is it possible to listen to the events from the cropper, like 'built.cropper' etc.?

I tried looking at the new proxy feature, but it only seems to work for method calling, not events.

Is there any way to preview the image while dragging as in the main cropper.js https://fengyuanchen.github.io/cropper/. Is there any way I can achieve it in ngCropper. Please help

When I try to upload a second image, it's not working - the cropper remains with the first image.

I mean, how do I initialize the cropper to edit and image that has already been uploaded for instance?

As was updated in #9, the directive change its syntax, I updated that.

Now the cropper is not populating the file or data variables (all taken from the demo)

$scope.previewThis = function() {
  if (!file || !data) {
    console.log("Oops"); # <- Here's the issue
    return;
  }
  Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
    #do things...
  });
};

Here's the view with the updated syntax

<a ng-click="previewThis()" class="btn btn-primary btn-lg pull-right" style="margin-bottom:10px; width:100%;">Cortar</a>
<div ng-if="dataUrl" class="img-container">
        <img ng-if="dataUrl" ng-src="{{dataUrl}}" 
          ng-cropper
          ng-cropper-show="showEvent"
          ng-cropper-hide="hideEvent"
          ng-cropper-options="options">
</div>

Anything that I might be missing? Any pointers?
Thanks.

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);
    }

});

How to start Cropper if image is loaded not from a input but img src?

Thanks for the work.

The current demo assumes user will upload the file from its local file system. How can I download an image from the server side and then crop it. Since I'm still new to Angular, can you help me find the way?

I.e., $scope.onFile = function (blob) {}; is used in the demo. but what if the original image is on the server already and I want to pass the image URL to the cropper.

When I use jQuery 2.2.0 I get this error and the ngCropper plugin doesn't work:
d.one(...).trigger is not a function

I cannot seem to find any such option, but if there is one, please let me know.

Fix this with ngCropper as in here

fengyuanchen/cropper#120

Hi there,

I use code from demo in angular modal view, however, the crop view doesn't show up when I upload a file. Is there any solution for this?

Thanks.

Hey guys, I'm testing this library and I found a problem.

In the directive, there is a preprocess function, with a $q.all than returns lastUpdatedOptions when is resolved.

$q.all(toResolve).then(function(values) {
      var lastUpdatedOptions = values[values.length-1];
      defer.resolve(lastUpdatedOptions);
    });

But in my proyect when returns the options, return undefined value because values.length is undefined. To solve this problem, I changed that line to this another

var lastUpdatedOptions = values[_.size(values)-1];

because I'm using lodash and I can know the size of the array with that method. I don't know if someone have a similar problem.

Sorry for my english. Thanks

Like in the cropper website example, how can I do for example:
$().cropper("getCroppedCanvas", { width: 160, height: 90 })
with ngCropper?

Hey, iI'm trying to crop image but not picking it up from input field, but getting it from base64 string.
So I'm doing like this - $scope.dataUrl = newDataURL; - and it starts showing up the image. But when I try to get cropped image - it does not work, because calling Cropper.crop($scope.cropperFile, $scope.cropperData).then(Cropper.encode) means that I have to have file picked in input. But it comes from my base64 string, not from input.
How can I set image from string and get cropped image then....

Can anyone tell me how I can access the getData method of the cropper?

My understanding is that clicking the Show Preview button is supposed to show the cropped image right? But it doesn't work with the exact code in the demo.

Is there hope we can get help from the contributors here? The parent Cropper is thriving while this here we can't get a working demo.

Hello,
I've been trying to understand the code. It works well with one input file and cropper. I can't seem to do multiple files and croppers.

How does onFile work? If I have 2 input files, do I
a) call a different function, like onFile2, or
b) refer to the next file object in array, i.e., file[1]?

Confused.

How about the preview? Do I give the div a different class and pass it as an option, e.g $scope.option_2 = {preview:"some_other_class"}, then in the attribute, refer to it as ng-options="option_2".

Any help would be appreciated. Thanks in advance.

Here is my (obviously faulty) code:

JS:

   var file, file2, data, data2;

/**

• Method is called every time file input's value changes.

• Because of Angular has not ng-change for file inputs a hack is needed -

• call angular.element(this).scope().onFile(this.files[0])

• when input's event is fired.
  */
  $scope.onFile = function(blob) {
  Cropper.encode((file = blob)).then(function(dataUrl) {
  $scope.dataUrl = dataUrl;
  $timeout(showCropper); // wait for $digest to set image's src
  });
  };
  $scope.onFile2 = function(blob) {
  Cropper.encode((file = blob)).then(function(dataUrl2) {
  $scope.dataUrl2 = dataUrl2;
  $timeout(showCropper); // wait for $digest to set image's src
  });
  };

  /**

• When there is a cropped image to show encode it to base64 string and

• use as a source for an image element.
  */

  $scope.options_2 = {
  preview:"preview-thumbnail",
  maximize: true,
  aspectRatio: 3/1,
  done: function(dataNew) {
  data = dataNew;
  }
  };
  $scope.preview = function() {
  if (!file || !data) return;
  Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
  ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
  });
  };

  $scope.preview2 = function() {
  if (!file || !data) return;
  Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
  ($scope.preview2 || ($scope.preview2 = {})).dataUrl = dataUrl;
  });
  };

  $scope.scale = function(width) {
  Cropper.crop(file, data)
  .then(function(blob) {
  return Cropper.scale(blob, {width: width});
  })
  .then(Cropper.encode).then(function(dataUrl) {
  ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
  });
  }

  $scope.scale2 = function(width) {
  Cropper.crop(file2, data)
  .then(function(blob) {
  return Cropper.scale(blob, {width: width});
  })
  .then(Cropper.encode).then(function(dataUrl) {
  ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
  });
  }

  /**

• Object is used to pass options to initalize a cropper.

• More on options - https://github.com/fengyuanchen/cropper#options
  */
  $scope.options = {
  maximize: true,
  aspectRatio: 3/1,
  done: 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-show & ng-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); }

  })
  

HTML:

Album Art (900 x 300 px) Show preview Scale to 200px width Disabled

Cropped Image:

ng-show="show.cropper" ng-hide="hide.cropper">

Show preview Scale to 200px width Disabled

Cropped Image:

ng-show="show.cropper2" ng-hide="hide.cropper2">

How to use aspecratio like 16x9 16x10
i can only use 1x1, 2x1,3x1

I am trying to use the latest stuff that fengyuanch has included in cropper but if I try to use the latest I am getting JS errors.

Hello,

I have an issue setting cropper viewer to cover full height and width of the image being cropped when initializing it. I have used maximize:true param for this but this doesn't seem to work for all image resolutions. I am having a hard time figuring out why by looking at the source.

Image size it doesn't work for right now - 960x641

Below is my configuration for initializing cropper

vm.imageCropperOptions = {
            maximize: true,          
            done: function(dataNew) {
                imgCropData = dataNew;
            }
        };

ngCropper version - 0.2.2

I found that changing dragger.heightand dragger.width to 1 from 0.8 in initDragger() function does the job. Is this the correct solution ?

When I want to crop an image, I cannot move the crop area in horizontal direction. How can I fix that?

Hi!
Can anyone help me?
I do not know how to launch the event zoom

Hi there,

After we updated to Angular 1.4, ngCropper stopped working due to a conflict with the new ngOptions in Angular 1.4.

A simple change to the directive scope definition to { scope: { options: '=ngCropperOptions' } } fixed the problem.

Would you fix that and release a Angular 1.4 compatible version? Thanks, awesome lib.

once uploaded the Image there is now way to upload another image.

Hi guys!
Great work on this wrapper, this jQuery cropper is really good.
I was tunning it for the app I'm working on and can't get the wheelZoomRatio option to work! I defined it in the options and even by calling the cropper method to set default options passing an options object with this property defined, but no luck!
Any help will be greatly appretiated!

Does ngCropper compatible with angular 1.5? Could you guide me how to check if it is compatible and probably create pull request?
Thx.

Can you make a demo with gh-pages? 😄 It will be much easier to see what library does exactly (and how it looks)...

Hy, if this possible to crop with the image of the url ?? instead of a formData ??

index.html

<div ng-if="cropBaru" class="img-container">
   <img ng-if="cropBaru" ng-src="{{cropBaru}}" width="800"
  ng-cropper
  ng-cropper-options="options"
  ng-cropper-show="showEvent"
  ng-cropper-hide="hideEvent">
</div>

index.js

$scope.cropBaru = 'optimus.jpg';

.... other code

when try to run code, i get error
TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

can you please explain what i need to do with my code?

There is a list of methods the cropper exposes. Should add an interface to call them.

When not declaring 'build' option, cropper is unable to attach the build event and therefore returns a window object, that cannot be triggered:

The line that fails is this one:

$this.one(EVENT_BUILD, options.build).trigger(buildEvent);)

it throws the error:

TypeError: $this.one(...).trigger is not a function
    at Cropper.prototype.load (ngCropper.all.js:formatted:258)
    at new Cropper (ngCropper.all.js:formatted:230)
    at HTMLImageElement.<anonymous> (ngCropper.all.js:formatted:2201)
    at Function.jQuery.extend.each (jquery.js:360)
    at jQuery.fn.jQuery.each (jquery.js:137)
    at $.fn.cropper (ngCropper.all.js:formatted:2195)
    at ngCropper.all.js:formatted:2249
    at processQueue (angular.js:14745)
    at angular.js:14761
    at Scope.$eval (angular.js:15989)

You should replace the options.build by options.build || function() {}.

image not change when i select new image file... how to fix that?