jquery cropper 初始化

要初始化 jQuery Cropper，需要按照以下步骤进行：

1. 引入 jQuery 和 Cropper 的 JavaScript 文件：

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/cropper/4.2.0/cropper.min.js"></script>

2. 在 HTML 中定义一个图片容器和一个按钮：

   <div>
     <img id="image" src="picture.jpg">
   </div>
   <button id="crop">Crop</button>

3. 使用 jQuery 选择图片容器和按钮，然后调用 Cropper 的初始化方法：

   $(function() {
     var $image = $('#image');
     var $cropButton = $('#crop');

     $image.cropper({
       aspectRatio: 16 / 9,
       crop: function(event) {
         console.log(event.detail.x);
         console.log(event.detail.y);
         console.log(event.detail.width);
         console.log(event.detail.height);
         console.log(event.detail.rotate);
         console.log(event.detail.scaleX);
         console.log(event.detail.scaleY);
       }
     });

     $cropButton.on('click', function() {
       var canvas = $image.cropper('getCroppedCanvas');
       // TODO: 处理裁剪后的 canvas 对象
     });
   });

在初始化的时候，可以传入一些配置选项，比如 `aspectRatio` 表示裁剪框的宽高比，`crop` 是一个回调函数，会在每次裁剪操作完成后被调用，其中的 `event.detail` 对象包含了裁剪框的位置、大小、旋转等信息。

4. 在按钮的点击事件中，可以调用 Cropper 的 `getCroppedCanvas` 方法获取裁剪后的 canvas 对象，然后进行相关处理。