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

jquery 图像裁剪中的精确尺寸

Exact dimensions in jquery Image cropping

jquery

image

crop

resize-crop