Croppie.js Image cropper adding rotate function

Question

I am using croppie.js library for cropping the images. But some of the image when selected appears inverted. I want to add an onclick rotate function which would rotate the image when the button is clicked. I found the example code to rotate in the documentation but adding it in my bit of code isn't working at all. I am sure that I am making a mistake which I am not being able to get through. Below are both the codes. Codepen snippet here [ https://codepen.io/zoomkraft/pen/rNNWzqJ ][1]

My Code:

$(document).ready(function(){
  vanilla = $('#image_demo').croppie({
    enableExif: true,
    viewport: {width:200, height:200, type:'circle'}, // circle or square
    boundary:{width:300, height:300},
    showZoomer: false,
    enableOrientation: true
  });
  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      vanilla.croppie('bind', {
        url: event.target.result
      }).then(function(){
        // console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });
  $('.crop_image').click(function(event){
    vanilla.croppie('result', {
      type: 'canvas',
      size: 'original',
      quality: 1
    }).then(function(response){
      $.ajax({
        url:"croppieupload.php",
        type: "POST",
        data:{"image": response},
        success:function(data){
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

  // BELOW CODE IS NOT WORKING AT ALL
  $('.vanilla-rotate').on('click', function(event) {
        vanilla.rotate(parseInt($(this).data('deg')));
    });

Code I found in the documentation of croppie.js

function demoVanilla() {
    var vEl = document.getElementById('vanilla-demo'),
        vanilla = new Croppie(vEl, {
        viewport: { width: 200, height: 100 },
        boundary: { width: 300, height: 300 },
        showZoomer: false,
        enableOrientation: true
    });
    vanilla.bind({
        url: 'demo/demo-2.jpg',
        orientation: 4,
        zoom: 0
    });
    vEl.addEventListener('update', function (ev) {
        // console.log('vanilla update', ev);
    });
    document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
        vanilla.result({
            type: 'blob'
        }).then(function (blob) {
            popupResult({
                src: window.URL.createObjectURL(blob)
            });
        });
    });

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

Expert jQuery coders are requested to go through both and help me with it.

[1]: https://codepen.io/zoomkraft/pen/rNNWzqJ

Answer 1

For above answer you have to add

enableOrientation: true

otherwise you will get following error:

Uncaught Croppie: Cannot rotate without enableOrientation or EXIF.js included.

check here

Answer 2

You can use this code:

$(document).ready(function() {
  vanilla = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width: 200,
      height: 200,
      type: 'circle'
    }, // circle or square
    boundary: {
      width: 300,
      height: 300
    },
    showZoomer: false,
    enableOrientation: true
  });
  $('#upload_image').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(event) {
      vanilla.croppie('bind', {
        url: event.target.result
      }).then(function() {
        // console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });
  $('.crop_image').click(function(event) {
    vanilla.croppie('result', {
      type: 'canvas',
      size: 'original',
      quality: 1
    }).then(function(response) {
      $.ajax({
        url: "croppieupload.php",
        type: "POST",
        data: {
          "image": response
        },
        success: function(data) {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });


  $("#rotateLeft").click(function() {
    vanilla.croppie('rotate', parseInt($(this).data('deg')));
  });

  $("#rotateRight").click(function() {
    vanilla.croppie('rotate', parseInt($(this).data('deg')));
  });

});

With this html :

<button id="rotateLeft" data-deg="-90">Rotate Left</button>
<button id="rotateRight" data-deg="90">Rotate Right</button>