koorgoo / ngCropper

AngularJS wrapper for https://github.com/fengyuanchen/cropper
107 stars 72 forks source link

ngCropper call methods, code example needed #16

Closed jrbecart closed 9 years ago

jrbecart commented 9 years ago

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

koorgoo commented 9 years ago

Hi. You can use proxing, see demo.js for example. On Aug 21, 2015 10:52 PM, "jrbecart" notifications@github.com wrote:

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

— Reply to this email directly or view it on GitHub https://github.com/koorgoo/ngCropper/issues/16.

jrbecart commented 9 years ago

I don't understand how to use the proxy:

$scope.cropperProxy = 'cropper.getCroppedCanvas'; And after...? Sorry if it's a dumb question.

koorgoo commented 9 years ago

Ok. First you should define a proxy name in $scope.

$scope.cropper = {}; // This is a container object.
$scope.cropperProxy = 'cropper.first'; // This means that your proxy will be set to $scope.cropper.first

Then you should pass $scope.cropperProxy to directive via attribute in html.

<img ng-cropper ng-cropper-proxy="cropperProxy" ...>

The directive will set cropper function to $scope.cropper.first - $scope.cropper.first() equals element.cropper(). Finally $scope.cropper.first('getCroppedCanvas', { width: 160, height: 90 }) is what you need.

koorgoo commented 9 years ago

Working with DOM in controller is a bad practice. Anyway in some cases we must do it. I agree that proxing is really a bit tricky :smiley:

jrbecart commented 9 years ago

Thanks!