如何为cropper.js指定固定的高度和宽度以实现相应的裁剪。

Question

我正在使用cropper.js v0.8.0

我使用以下jQuery代码来裁剪图像。

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_view').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }

function initCropper(){
        // console.log("Came here")
        var image = document.getElementById('img_view');
        var cropper = new Cropper(image, {
          aspectRatio: 1/1,
          cropBoxResizable: false,
          crop: function(e) {
            // console.log(e.detail.x);
            // console.log(e.detail.y);
          }
        });

        // On crop button clicked
        document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            document.getElementById("cropped_result").appendChild(img);

            /* ---------------- SEND IMAGE TO THE SERVER-------------------------

                cropper.getCroppedCanvas().toBlob(function (blob) {
                      var formData = new FormData();
                      formData.append('croppedImage', blob);
                      // Use `jQuery.ajax` method
                      $.ajax('/path/to/upload', {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                          console.log('Upload success');
                        },
                        error: function () {
                          console.log('Upload error');
                        }
                      });
                });
            */
        })
    }

默认情况下，当裁剪器区域用于裁剪图像时，默认情况下是按照纵横比进行的。我希望它能够按照特定的高度和宽度进行裁剪，例如420x230。我尝试过

maxCropBoxWidth: 420,
maxCropBoxHeight: 230,

并且

minCropBoxWidth: 420,
minCropBoxHeight: 230,

以下是我的HTML代码：

<div class="custom-file">
    <input type="file" id="post_featured_image" name="post_featured_image" class="custom-file-input" onchange="readURL(this);" />
    <div class="image_container">
        <img id="img_view" class="fixed-size-crop-box" src="#" alt="This is How the Featured Image will Look Exactly..">
    </div>
    <div id="cropped_result"></div>
    <button id="crop_button">Crop</button>
    <label class="custom-file-label" for="post_featured_image">Choose file</label>
</div>

但仍然没有成功。代码是否存在错误或由于较低版本而无法工作，有人可以帮我更新版本吗？这将非常有帮助。我已经卡在这个问题上10个小时了。

- Akshay Shrivastav

Answer 1

也许这能解决你的问题。

var cropper = new Cropper(image, {
    dragMode: 'move',
    autoCropArea: 0.65,
    restore: false,
    guides: false,
    center: false,
    highlight: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    toggleDragModeOnDblclick: false,
    data:{ //define cropbox size
      width: 240,
      height:  90,
    },
  });

- Phelipe Hass

Answer 2

我已经尝试过这个，它有效，你可以找到有用的信息

 const image = document.getElementById('crop_img');

                const cropper = new Cropper(image, {
                    preview: '.preview',
                    viewMode: 2,
                    modal: true,
                    cropBoxResizable: false,


                    ready: function () {
                        cropper.setCropBoxData({
                            width: 150,
                            height: 150,
                        });
                           
                      
                    },


                });

  <img src="~/images/demo_img.jpg" id="crop_img" />

- sumit dubey