Croppie.js Функция поворота кроппера изображения

Question

Я использую библиотеку croppie.js для обрезки изображений. Но некоторые изображения при выборе отображаются перевернутыми. Я хочу добавить функцию поворота по клику, которая будет поворачивать изображение при нажатии кнопки. Я нашел пример кода для поворота в документации, но добавление его в мой фрагмент кода не работает вообще. Я уверен, что я делаю ошибку, которую я не могу исправить. Ниже приведены оба кода. Фрагмент кода здесь [https://codepen.io/zoomkraft/pen/rNNWzqJ] [1]

Мой код:

$(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')));
    });

Код, который я нашел в документации к 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')));
    });
}
});

Опытным кодировщикам jQuery предлагается пройти оба и помочь мне с этим.

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