带有调整大小预览的 Jcrop

Question

我正在使用带有预览窗格的 Jcrop，如教程http://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/ 中所示。这显示了如何使用预览窗格创建简单的 Jcrop 界面，以便在裁剪时显示结果。不幸的是，在这种情况下，预览窗格的大小是固定的，并且只是在您裁剪时放大和缩小图像，从而生成相同固定大小的裁剪图像。

我想做的是让预览窗格与裁剪工具一起调整大小，以在用户裁剪时显示结果图像，从而允许用户决定结果图像的尺寸。然后，我可以在上传图片时应用最大或最小尺寸。

预览窗格 CSS 和代码如下。请注意 targ_h 和 targ_w 变量定义为我选择的任何内容。 orig_w 和 orig_h 是从原始图像中读取的。

    #preview
    {
        width: <?php echo $targ_w?>px;
        height: <?php echo $targ_h?>px;
        overflow:hidden;
    }



function updateCoords(c)
        {
            showPreview(c);
            $("#x").val(c.x);
            $("#y").val(c.y);
            $("#w").val(c.w);
            $("#h").val(c.h);
        }

        function showPreview(coords)
        {
            var rx = <?php echo $targ_w;?> / coords.w;
            var ry = <?php echo $targ_h;?> / coords.h;

            $("#preview img").css({
                width: Math.round(rx*<?php echo $orig_w;?>)+'px',
                height: Math.round(ry*<?php echo $orig_h;?>)+'px',
                marginLeft:'-'+  Math.round(rx*coords.x)+'px',
                marginTop: '-'+ Math.round(ry*coords.y)+'px'
            });
        }

以前有没有人这样做过，并且预览窗格的宽度和高度会随着裁剪工具的宽度和高度而变化？

Answer 1

这就是我在我的工作中所做的：

function showPreview(photoDiv, coords, maxX, maxY)
{
    var rx = maxX / coords.w;
    var ry = maxY / coords.h;

    rx = (rx == 0) ? 1 : rx;
    ry = (ry == 0) ? 1 : ry;

    photoX = $("#" + photoDiv + " #photo").width();
    photoY = $("#" + photoDiv + " #photo").height();

    $("#" + photoDiv + " #preview").css({
        width: Math.round(rx * photoX) + 'px',
        height: Math.round(ry * photoY) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

我猜maxX 将引用您的$targ_w。这是这样设置的，因为我在一页中有多个 jCrop 实例。根据您的设置进行编辑。