javascript - Croppie.js 图像裁剪器添加旋转功能

Question

我正在使用 croppie.js 库来裁剪图像。但是一些图像在被选中时出现倒置。我想添加一个 onclick 旋转功能，它会在单击按钮时旋转图像。我发现示例代码在文档中轮换，但将其添加到我的代码中根本不起作用。我确信我犯了一个我无法克服的错误。下面是这两个代码。 Codepen 片段在这里 [ 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

Answer 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);
        }
      });
    })
  });


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

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

});

用这个 html :

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