javascript - jquery在上传croppie插件之前裁剪图像

Question

您好，我在使用croppie插件在CakePHP中保存裁剪后的图像时遇到困难，图像被裁剪，但是在保存图像时，它保存整个图像而不是裁剪后的图像，在裁剪裁剪图像的src之后，它是正确的，但每当我尝试保存它时，它都会保存整个默认图像。

$uploadCrop = $('#upload-demo').croppie({
  enableExif: true,
  viewport: {
    width: 180,
    height: 180,
    type: 'circle'
  },
  boundary: {
    width: 190,
    height: 190
  },
  showZoomer: false
});

$('#my_file').on('change', function() {
  $('#tttssss').show();
  $('#user-select-image').hide();

  var reader = new FileReader();
  reader.onload = function(e) {
    $uploadCrop.croppie('bind', {
      url: e.target.result
    }).then(function() {
      console.log('jQuery bind complete');
    });

  }
  reader.readAsDataURL(this.files[0]);
});

$('.upload-result').on('click', function(ev) {
  $uploadCrop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    })


    .then(function(resp) {

      $('#user-select-image').attr('src', resp);
      $('#user-select-image').show();
      $("#tttssss").hide();
    });
});
$(document).ready(function() {
  $("#user-select-image").click(function() {
    $("input[id='my_file']").click();
  });
});

<div id="tttssss" style="display:none;">
  <div id="upload-demo">
  </div>
  <div style="width:70%;margin: 0 auto;">
    <a class="btn btn-success upload-result" rel="<?php //echo $imge['User']['id'] ?>">Upload Image</a>
  </div>
</div>


<?php echo $this->Html->image($fileuser, array('class' => 'img-circl', 'id' => 'user-select-image', 'style' => 'margin-top:30px!important;')); ?>
<?php echo $this->Form->file('User.profile_img', array('id' => 'my_file', 'style' => 'display:none;')); ?>

上传图片即上传整张图片

这是我的代码

Answer 1

在函数中:
$uploadCrop.croppie('结果', {
类型:' Canvas '，
大小:“视口(viewport)”
})

.then(函数(resp) {

  $('#user-select-image').attr('src', resp.target.result);
  $('#user-select-image').show();
  $("#tttssss").hide();
});});

您必须使用:resp.toDataURL() 而不是 resp.target.result