Croppie.js 图像裁剪器添加旋转功能答案

【问题标题】：Croppie.js Image cropper adding rotate functionCroppie.js 图像裁剪器添加旋转功能
【发布时间】：2019-10-19 21:29:11
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案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>

【讨论】：

【解决方案2】：

对于以上答案，您必须添加

启用方向：真

否则会出现如下错误：

未捕获的 Croppie：如果不包含 enableOrientation 或 EXIF.js，则无法旋转。

check here

【讨论】：