Cropper.js多个图像并上传到服务器？

Question

您好我在一个页面中有两个图像，我必须裁剪一个图像的一小部分然后再制作OCR，然后再制作第二个图像。我只使用一张图片工作fengyuanchen / cropper.js。但我无法使用两张图片，因为我只在一张图片中裁剪而在另一张图片中没有裁剪。我尝试使用cropper.js多个图像修改代码，但对我来说仍然无法实现。我是新手用户。我会帮助你。

这是我的代码： HTML =

    <div class="col-6">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="containeri">
            <img id="image" src="<?php echo $img1; ?>" alt="Document" width="480" height="640">
          </div>
          <a class="carousel-control-prev" role="button" onclick="cambiarImagen1()">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" role="button" onclick="cambiarImagen2()">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

JQUERY =

  function cambiarImagen(){
    var carpeta = "<?php echo $img1; ?>"
    $("#image").attr("src", carpeta);
    cropi()
  }

  function cropi() {

    var images = document.querySelectorAll('#image');
    var minAspectRatio = 1.0;
    var maxAspectRatio = 1.0;
    var cropper = new Cropper(image, {
      ready: function () {
        var cropper = this.cropper;
        var containerData = cropper.getContainerData();
        var cropBoxData = cropper.getCropBoxData();
        // var aspectRatio = cropBoxData.width / cropBoxData.height;
        var newCropBoxWidth;

        if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
          newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);

          cropper.setCropBoxData({
            left: (containerData.width - newCropBoxWidth) / 2,
            width: newCropBoxWidth
          });
        }
      },
    });
      document.addEventListener('click', function(clickEvent) {
          if (clickEvent.target.id == 'saveButton') {
              cropper.getCroppedCanvas().toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);

                  console.log('formData: ',formData, 'blob', blob);
                // Use `jQuery.ajax` method
                $.ajax({
                  url: 'pattern/includes/upload.php'
                  method: "POST",
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function () {
                    d = new Date();
                    $("#img").attr("src", "test/cropped.jpg?"+d.getTime());
                  },
                  error: function () {
                    d = new Date();
                    $("#img").attr("src", "test/cropped.jpg?"+d.getTime());
                }
                });
                console.log('sent ajax request');
              });
          }
      });
    }

  function cambiarImagen2(){
    var carpeta2 = "<?php echo $img2; ?>"
    $("#image").attr("src", carpeta2);
    cropi()
  }

        }