jquery - 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 コードを変更し、widthandheightパラメータを変更します。

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