jQuery圖像裁剪中的確切尺寸

Question

裁剪圖像后，我需要380x156尺寸。 我正在使用此js代碼。

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

默認情況下，它會以198x198的尺寸進行裁剪，但是我想以380x156的尺寸進行裁剪。 根據我的要求，建議我一種簡單的方法來裁剪圖像。

Answer 1

根據選擇器正方形的大小進行裁剪。 修改您的CSS代碼並更改width和height參數。

.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;
}