how to give cropper.js a fixed height and width to crop accordingly

Question

I am using cropper.js v0.8.0

I using the below jQuery code to crop the image.

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');
                        }
                      });
                });
            */
        })
    }

By Defualt whenever the cropper area occurs to crop the image it is by default by aspect ratio. I want it to crop with a specific height and width like 420x230. I tried

maxCropBoxWidth: 420,
maxCropBoxHeight: 230,

and

minCropBoxWidth: 420,
minCropBoxHeight: 230,

Following is my HTML Code:

<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>

but still no success. Is there any error in the code or due to a lower version its not working, can anyone help me out with the updated version. It would be very helpful. M stuck on this since last 10 hours.

score 8 · Answer 1 · answered Jun 18 '20 at 11:50

Maybe that solves your problem.

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,
    },
  });

score 0 · Answer 2 · answered Nov 18 '22 at 11:35

I have tried this and it works you can find helpful

 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" />

how to give cropper.js a fixed height and width to crop accordingly

2 Answers2