Layui を使用して画像のトリミングとズーム機能を実装する方法

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

<div class="layui-upload-drag" id="uploadContainer">
  <i class="layui-icon">&#xe67c;</i>
  <p>点击上传，或将文件拖拽到此处</p>
</div>

layui.use('upload', function() {
  var upload = layui.upload;
  
  upload.render({
    elem: '#uploadContainer',
    url: 'upload.php',
    done: function(res) {
      // 上传成功后的回调函数
      var imageUrl = res.data.url;
      
      // 初始化图片剪裁器
      layui.use('imageCropper', function() {
        var imageCropper = layui.imageCropper;
        
        var cropper = new imageCropper('#uploadContainer', {
          saveW: 300, // 保存宽度，默认为裁剪框的宽度
          saveH: 200, // 保存高度，默认为裁剪框的高度
          areaSelect: [70, 70, 220, 220], // 默认裁剪框位置，[x, y, w, h]
          imgSrc: imageUrl, // 图片地址
          onInit: function() {
            // 初始化完成后的回调函数
            console.log('初始化完成');
          },
          onCrop: function(res) {
            // 裁剪完成后的回调函数
            console.log('裁剪完成');
            console.log(res);
          }
        });
        
        // 手动启动裁剪器
        cropper.start();
      });
    }
  });
});

<div class="layui-carousel">
  <div carousel-item="" id="layerPhotos">
    <a href="image1.jpg" title="图片1" data-index="0"><img  src="image1.jpg" alt="Layui を使用して画像のトリミングとズーム機能を実装する方法" ></a>
    <a href="image2.jpg" title="图片2" data-index="1"><img  src="image2.jpg" alt="Layui を使用して画像のトリミングとズーム機能を実装する方法" ></a>
    <a href="image3.jpg" title="图片3" data-index="2"><img  src="image3.jpg" alt="Layui を使用して画像のトリミングとズーム機能を実装する方法" ></a>
  </div>
</div>

layui.use('layer', function() {
  var layer = layui.layer;
  
  layer.photos({
    photos: '#layerPhotos',
    anim: 5 // 弹出图片动画类型
  });
});