Javascript JQuery裁剪器插件：裁剪图像的大小大于实际裁剪大小

我试图实现裁剪图像上传系统使用，但我挣扎与裁剪图像部分

问题是

裁剪图像的大小大于实际裁剪大小

Html

    //load the image for crop
    <div class="img-container">
        <img id="image" src="latest.jpg">
     </div>
      //load the cropped image after cropping
      <img id="db-image" />
      <input type="button" name="" id="getimage" value="getimage"/>

---

您可以这样做（这是我自己的代码，请理解其概念）：

请注意，我在“getCroppedCanvas”函数中传递了几个参数，这将解决将大于裁剪大小的图像存储到服务器的问题

此外，您还可以在选项变量内设置“裁剪框”的最小高度和宽度：

var $image = $('#jquery_cropper_image');
var cropper = $image.data('cropper');

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`

        cropper.getCroppedCanvas({
          width: 160,
          height: 90,
          minWidth: 500,
          minHeight: 500,
          maxWidth: 4096,
          maxHeight: 4096,
          fillColor: '#fff',
          imageSmoothingEnabled: false,
          imageSmoothingQuality: 'high',
        }).toBlob((blob) => {
          var formData = new FormData();
          //var image_name = document.getElementById('jquery_cropper_image').src;
          var image_name = $('#jquery_cropper_image').attr('src');
          var image_name = 'cropped_'+image_name.replace('images/','');

          formData.append('croppedImage', blob, image_name);

          // Use `jQuery.ajax` method
          $.ajax('upload_image.php', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response){

                if(response == 'cropped_upload_success'){
                    console.log('cropped_upload_success');
                    document.getElementById('success_crop_save_notice').innerText = 'Success!';
                }

            },
            error() {
              console.log('Upload error');
            },
          });
        });

var $image = $('#jquery_cropper_image');
var cropper = $image.data('cropper');

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`

        cropper.getCroppedCanvas({
          width: 160,
          height: 90,
          minWidth: 500,
          minHeight: 500,
          maxWidth: 4096,
          maxHeight: 4096,
          fillColor: '#fff',
          imageSmoothingEnabled: false,
          imageSmoothingQuality: 'high',
        }).toBlob((blob) => {
          var formData = new FormData();
          //var image_name = document.getElementById('jquery_cropper_image').src;
          var image_name = $('#jquery_cropper_image').attr('src');
          var image_name = 'cropped_'+image_name.replace('images/','');

          formData.append('croppedImage', blob, image_name);

          // Use `jQuery.ajax` method
          $.ajax('upload_image.php', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response){

                if(response == 'cropped_upload_success'){
                    console.log('cropped_upload_success');
                    document.getElementById('success_crop_save_notice').innerText = 'Success!';
                }

            },
            error() {
              console.log('Upload error');
            },
          });
        });

 var options = {
    aspectRatio: 1 / 1,
    viewMode: 2,
    minCropBoxWidth: 500,
    minCropBoxHeight: 500,
    preview: '.img-preview',
    crop: function (e) {
      $dataX.val(Math.round(e.detail.x));
      $dataY.val(Math.round(e.detail.y));
      $dataHeight.val(Math.round(e.detail.height));
      $dataWidth.val(Math.round(e.detail.width));
      $dataRotate.val(e.detail.rotate);
      $dataScaleX.val(e.detail.scaleX);
      $dataScaleY.val(e.detail.scaleY);
    }
  };