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.
See here.
You can try the alternative way of calling the method by using
$('#image').cropper.('rotate',90);