jCrop un 克制比例

jCrop un restrain proportions

本文关键字:un jCrop      更新时间:2023-09-26

我在.NET MVC4中构建了一个图像上传和裁剪应用程序,并具有我在deepliquid中找到的以下代码.com.Aas作为MVC开发人员,我有该部分工作,但我的javascript还有很多不足之处。下面的代码约束比例,如何更新它,使其不约束比例但仍保留预览?

            <script type="text/javascript">
                jQuery(function ($) {
                    // Create variables (in this scope) to hold the API and image size
                    var jcrop_api,
                        boundx,
                        boundy,
                        // Grab some information about the preview pane
                        $preview = $('#preview-pane'),
                        $pcnt = $('#preview-pane .preview-container'),
                        $pimg = $('#preview-pane .preview-container img'),
                        xsize = $pcnt.width(),
                        ysize = $pcnt.height();
                    $('#target').Jcrop({
                        onChange: updatePreview,
                        onSelect: updatePreview,
                        **aspectRatio: xsize / ysize**
                    }, function () {
                        // Use the API to get the real image size
                        var bounds = this.getBounds();
                        boundx = bounds[0];
                        boundy = bounds[1];
                        // Store the API in the jcrop_api variable
                        jcrop_api = this;
                        // Move the preview into the jcrop container for css positioning
                        $preview.appendTo(jcrop_api.ui.holder);
                    });
                    function updatePreview(c) {
                        if (parseInt(c.w) > 0) {
                            var rx = xsize / c.w;
                            var ry = ysize / c.h;
                            $pimg.css({
                                width: Math.round(rx * boundx) + 'px',
                                height: Math.round(ry * boundy) + 'px',
                                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                                marginTop: '-' + Math.round(ry * c.y) + 'px'
                            });
                        }
                    };
                });
            </script>

知道了,只需删除

aspectRatio: xsize / ysize