javascriptjquerycropper

Image rotation on button press croppermaster


I am using this plugin to crop images and I want to implement rotation of the image whilst it is in the cropping tool. I am initializing the cropper using the following code.

$('#image').cropper({
  aspectRatio: 7 / 5,
  viewMode: 1,
  dragMode: 'move',
  autoCropArea: 0.65,
  restore: false,
  guides: false,
  highlight: false,
  width: 100,
  height: 100,
  cropBoxMovable: false,
  cropBoxResizable: false,
  toggleDragModeOnDblclick: false,
  minCropBoxWidth: 350,
  minCropBoxHeight: 200,
  strict: false
});

This is the HTML for the image and a button to rotate the image as Follows

<div>
   <img id="image" src="images/AddImage.png" class="userUpload" alt="Picture" />
</div>
<button type="button" class="btn btn-secondary" data-method="rotateTo" data-option="90" id="rotateImage">
    <span class="docs-tooltip" data-toggle="tooltip" title="$('#image').cropper.rotate(90)">
       Rotate 90°
    </span>
 </button>

Also, I have the following javascript function that is supposed to handle the rotation of the image.

$("#rotateImage").click(function () {
  $('#image').cropper.setCanvasData({ rotate: 90 });
});

However, I am getting the following error in the console.

Tools.js:993 Uncaught TypeError: $(...).cropper.setCanvasData is not a function

Does anyone have any suggestions as to where I have gone wrong when trying to rotate the imnage?

Thanks.


Solution

  • See here.

    You can try the alternative way of calling the method by using

    $('#image').cropper.('rotate',90);