Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set crop box in jquery cropper

I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:

var c1 = $('.cropper-example-1 img').cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
            }
        });
like image 856
Haddar Macdasi Avatar asked Jan 09 '23 06:01

Haddar Macdasi


1 Answers

After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.

       var cropper;
       var imgx;

        $(function(){
            var imgx = $('#cpdiv').find('img');
            cropper = new Cropper(imgx[0], {                    
                //aspectRatio: 1/2,
                autoCropArea: 0,
                strict: false,
                guides: false,
                highlight: true,
                dragCrop: false,
               //cropBoxMovable: false,
                cropBoxResizable: false,

                data:{
                    width: 240,
                    height:  607,
                },

                crop(event) {
                    console.log(event.detail.width);
                    console.log(event.detail.height);
                },

            });

     });

i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.

like image 100
Ande Caleb Avatar answered Jan 21 '23 19:01

Ande Caleb