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

Question

我们正在使用jcrop为用户裁剪图像，Accounts.following设置为jcrop，我们得到的最终裁剪图像是略微缩放的，In.We使用宽高比为1和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)的完美选择。

我希望它是你所需要的，并能帮助你解决这个问题。