Cropper: How can I set the fixed cropbox to a specific size?

[smoke-along]

How can I setup the fixed cropbox to have a specific size?

I've tried with the following code, but it doesn't work for me

$(function() {

var $toCrop = $('.img-container > img');

$toCrop.cropper({
      aspectRatio: 16 / 9,
      autoCropArea: 0,
  strict: false,
  guides: false,
  highlight: false,
  dragCrop: false,
  cropBoxMovable: false,
  cropBoxResizable: false
});

$toCrop.cropper("setCropBoxData", { width: "100", height: "50" });

});

[fengyuanchen]

As there is an asynchronous process when load the image, you should call most of the methods after built, except "setAspectRatio", "replace" and "destroy".
-- https://github.com/fengyuanchen/cropper#methods

So you code should be:

$(function() {
  var $toCrop = $('.img-container > img');

  $toCrop.cropper({
    aspectRatio: 16 / 9,
    autoCropArea: 0,
    strict: false,
    guides: false,
    highlight: false,
    dragCrop: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    built: function () {
      $toCrop.cropper("setCropBoxData", { width: "100", height: "50" });
    }
  });
});

[asherman1986]

I don't see what relevance this has to "toBlob is not a function" in the referenced issue

[pdiniz13]

i also dont see how this is relevant to the toBlob issue

[fengyuanchen]

As there is an asynchronous process when load the image, you should call most of the methods after built, except "setAspectRatio", "replace" and "destroy".
-- https://github.com/fengyuanchen/cropper#methods

So you should call getCroppedCanvas method after built:

$().cropper({
  built: function () {
    $(this).cropper('getCroppedCanvas').toBlob(function (blob) {
      // Handle the blob
      // ...
    });
  }
});

If not, you will get a toBlob is not a function error.

[MITASHI-OTHA]

how to call a function build ?
when i write

const cropper = $(elem).cropper({
  built: function () {
    $(this).cropper('getCroppedCanvas').toBlob(function (blob) {
      // Handle the blob
      // ...
    });
  }
});

cropper.build()  //no work !

Help me

[fengyuanchen]

@Yahshoua

1. The built hook function had been rename to ready.
2. Are you sure there is a method named build?

[ashrafali-v]

this.angularCropper.cropper.getCroppedCanvas() is return null on firefox appreciate any help. Thank you.

[jarridlima]

this.angularCropper.cropper.getCroppedCanvas() is return null on firefox appreciate any help. Thank you.

Me too... same problem in Firefox.

[mohamed351]

I can't make cropbox has a specific size (width and height)
`let ImageFile = a.srcElement.files[0];

            let reader = new FileReader();
            reader.readAsDataURL(ImageFile);
            reader.onload = function (a) {

                $("#image").attr("src", a.currentTarget.result);
                $("#image").css({ "display": "inline-block" });

                let myImage = document.getElementById("image");
                let croper = new Cropper(myImage, {
                    aspectRatio: 16 / 9,
                    autoCropArea: 0,
                    strict: false,
                    guides: false,
                    highlight: false,
                    dragCrop: false,
                    zoomable: false,
                    zoomOnTouch: false,
                    zoomOnWheel: false,
                    viewMode:3,
                    minContainerHeight: 150,
                    minContainerWidth:150,
                    dragMode:3,
                    //cropBoxResizable: false,
                    setCropBoxData: {
                        width: 100,
                        height: 50
                    },
                    ready: function (a) {
                        console.log(a);


                        console.log(myImage);


                    },

                    crop(event) {

                        myImage.cropper("setCropBoxData", { width: "100", height: "50" });

                        $("#x").val(event.detail.x);
                        $("#y").val(event.detail.y);
                        $("#Width").val(event.detail.width);
                        $("#Height").val(event.detail.height);



                    }

                });

            }
        }`

[mohamed351]

Now it is Working With Width 250px and Height 250px or very close to them !

<script src="~/js/cropper.js"></script>
    <script src="~/js/jquery-cropper.min.js"></script>
<scrript> 
  var $toCrop = $('#image');
                    $toCrop.cropper({
                        strict: true,
                        cropBoxResizable:false,
                        autoCropArea: 0,
                        resize:false,
                        strict: false,

                        highlight: false,
                        dragCrop: false,
                        zoomable: false,
                        zoomOnTouch: false,
                        zoomOnWheel: false,
                        viewMode: 3,

                        dragMode: 3,


                        ready: function () {
                            $toCrop.cropper("setCropBoxData", { width: 250, height: 250 });
                        },
                        crop: function (event) {

                            console.log(event.detail);
                            $("#x").val(event.detail.x);
                            $("#y").val(event.detail.y);
                            $("#Width").val(event.detail.width);
                            $("#Height").val(event.detail.height);

                        }

                    });
</script>