Exact dimensions in jquery Image cropping

Question

I need 380x156 dimensions after cropping image. I am using this js code.

 <script type="text/javascript">
        $(window).load(function() {
            var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: 'avatar.png'
            }
            var cropper = $('.imageBox').cropbox(options);
            $('#file').on('change', function(){
                var reader = new FileReader();
                reader.onload = function(e) {
                    options.imgSrc = e.target.result;
                    cropper = $('.imageBox').cropbox(options);
                }
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            })
            $('#btnCrop').on('click', function(){
                var img = cropper.getDataURL();
                $(".cropped").html("");
                $("#getImage").html("");
                $('.cropped').append('<img src="'+img+'">');
                $('#getImage').append('<img src="'+img+'">');
                $('#getImage').append('<input type="hidden" name="facilitylogo" value="'+img+'">');
            })
            $('#btnZoomIn').on('click', function(){
                cropper.zoomIn();
            })
            $('#btnZoomOut').on('click', function(){
                cropper.zoomOut();
            })
            $('.closeSa').on('click', function(){
                $('#myModal').modal('hide');
            })
        });
    </script>

It is cropping by default cropping with dimensions of 198x198, but i want to crop image with the dimensions of 380x156. Suggest me a easy way to crop image according to my requirements.

Answer 1

Crop depending the size of your selector square. Modify your css code and change the width and height parameter.

.imageBox .thumbBox
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 156px;
    margin-top: -100px;
    margin-left: -100px;
    border: 1px solid rgb(102, 102, 102);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    background: none repeat scroll 0% 0% transparent;
}