Question

我们正在使用jcrop裁剪用户Accounts的图像。我们正在使用的jcrop的设置。我们得到的最终裁剪图像有点缩放In.We使用宽高比1.and boxSize属性。

<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,
        bgColor: 'white',
        bgOpacity: .4,
        addClass: 'jcrop-light',
        boxWidth: 450,
        boxHeight: 400,
        aspectRatio: 1
    }, 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;
        jcrop_api.setSelect([0, 0, 200, 200]);
        jcrop_api.setOptions({
            bgFade: true
        });
        jcrop_api.ui.selection.addClass('jcrop-selection');

        // Move the preview into the jcrop container for css positioning
        $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        var rx = 200 / c.w; // 200 - preview box size
        var ry = 200 / c.h;
        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>

Answer 1

如果您正在裁剪头像/个人资料图片，我强烈建议您使用Guillotine。

它是一个非常轻量级的插件，可以裁剪，缩放和旋转图像，它具有触摸支持和响应（流畅）。它非常适合裁剪个人资料照片（demo）。

我希望它能满足您的需求，并帮助您解决这个问题。

jcrop不会裁剪预览窗口中的内容

1 个答案: