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

【问题标题】：jcrop do not cropping what is in preview windowjcrop 不裁剪预览窗口中的内容
【发布时间】：2014-07-01 03:23:37
【问题描述】：

我们正在使用 jcrop 为用户 Accounts 裁剪图像。按照我们正在使用的 jcrop 的设置。我们得到的最终裁剪图像稍微放大了一点。我们正在使用 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>

【问题讨论】：

标签： jquery jcrop

【解决方案1】：

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

这是一个非常轻量级的插件，可以裁剪、缩放和旋转图像，它支持触控并且响应迅速（流畅）。它非常适合裁剪个人资料图片 (demo)。

我希望它是您所需要的，并且它可以帮助您解决这个问题。

【讨论】：