jquery图像裁剪中的确切尺寸

Posted 2023-02-25

【中文标题】jquery图像裁剪中的确切尺寸

【英文标题】：Exact dimensions in jquery Image cropping

【发布时间】：2015-12-08 08:01:19

【问题描述】：

裁剪图像后我需要 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 的图像。 建议我根据我的要求裁剪图像的简单方法。

【参考方案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;