How to set Image Cropper controls outside the cropper

[sureshkoduri]

Hi,

Is there any way to declase image cropper controls outside the tag??

[bcabanes]

Hi @sureshkoduri You can do so by using the cropper API and implement your own buttons. Don't forget to hide the default ones. There is an example on how to use the API in the readme here .

[sureshkoduri]

Can you show me some code ?

[ignj]

hi @sureshkoduri , could you solve it? have you got any code that might help me?

[VyMajoris]

@ignj @sureshkoduri Documentation is kinda vague on this, but this how it's supposed to be done:

<image-cropper>
        [...]
        api="onApiReady"
        show-controls="false"
        [...]
</image-cropper>

var api = null
  $scope.onApiReady = function (_api) {
  api = _api
}

$scope.rotate = function (deg) {
  if (api) {
      api.rotate(deg)
  }
}

[tomchi89]

Or something like this:

<image-cropper [...] show-controls="false" api="$ctrl.getApi" [...]></image-cropper>

In your constructor you can return api:

this.getApi = (api) => { return this.api = api; }

Then add whatever you need to your controller Class:

rotateLeft() { this.api.rotate(-90); };

rotateRight() { this.api.rotate(90); };

zoomOut() { this.api.zoomOut(0.2); };

zoomIn() { this.api.zoomIn(0.1); };

fit() { this.api.fit(); };

crop() { this.api.crop(); };

and many mores like width , height, callback, image-url etc.