使用croppie.js ajax php jquery裁剪和上传照片

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />

<div id="cropped-image"></div>

<input type="file" id="upload-image" accept="image/*">

$(function() {
  var croppie = new Croppie(document.getElementById('cropped-image'), {
    viewport: { width: 200, height: 200 },
    boundary: { width: 300, height: 300 },
    enableOrientation: true
  });

  $('#upload-image').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(e) {
      croppie.bind({
        url: e.target.result
      });
    }
    reader.readAsDataURL(this.files[0]);
  });
});

<button id="crop-upload">裁剪并上传</button>

$('#crop-upload').on('click', function() {
  croppie.result('base64').then(function(base64) {
    // 发送Ajax请求将base64数据上传到服务器
    $.ajax({
      url: 'upload.php',
      method: 'POST',
      data: { image: base64 },
      success: function(response) {
        // 上传成功后的处理逻辑
      },
      error: function(xhr, status, error) {
        // 上传失败后的处理逻辑
      }
    });
  });
});

<?php
if(isset($_POST['image'])) {
  $base64_image = $_POST['image'];
  // 对base64_image进行处理，如保存到文件或存储到数据库
  // 返回处理结果给前端
}
?>