How to get a certain Croppie JavaScript to rotate using buttons

Question

I am trying to get a Croppie Script to rotate using buttons. It does not work with this particular script due to what appears to be a different syntax or something. I am not an avid JavaScript coder. But the below code is what I have and trying to get rotation using button to work. So far no good! Oh! I have enabled the Orientation by default in croppie.js because due to the syntax I did not know how to add it within the script below, just in case you are wondering.

$( document ).ready(function() {

    var $uploadCrop = $('#upload-demo');

        $uploadCrop.croppie({
            viewport: {
                width: 450,
                height: 450,
                type: 'square'
            },
            boundary: {
                width: 500,
                height: 500
            }
        });
        $uploadCrop.croppie('bind', 'imgs/cat.jpg');


        $('.vanilla-rotate').on('click', function(ev) {
            vanilla.rotate(parseInt($(this).data('deg'))); //<-------
        });


    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });

});

It seems to me that the line where I have comment out arrow is the problem. But I could be wrong.

I have a button on html page as

<button class="vanilla-rotate" data-deg="-90">Rotate</button>

Their Vanilla demo has the rotating feature but I am trying to get it to work on the Upload demo where they do not have rotation feature.

Answer 1

From Dustin Smith -

The difference is you're initializing croppie with jquery. So you'll want to execute the rotate method with jquery, like so:

$uploadCrop.croppie('rotate', parseInt($(this).data('deg')));

This did it for me! So problem solved! Thanks to Dustin!

Answer 2

Create a function after initializing uploadCrop.

$(function() {
  $('.vanilla-rotate').on('click', function(ev) {
        $uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
    });
});

Answer 3

use rot=6 for clockwise 90 deg, and rot=8 for anticlockwise 90 deg:

$('#rotate-btn').click(function() {
    orientation = rot;
    $image_crop.croppie('bind', {
      url: url,
      orientation: orientation
    });
  });

PS. if you want the original image back, use the same code snippet with rot=1.