JCrop showPreview 功能说明

Posted 2023-02-25

【中文标题】JCrop showPreview 功能说明

【英文标题】：JCrop showPreview function explanation

【发布时间】：2015-10-25 00:58:53

【问题描述】：

我很难弄清楚这个函数究竟做了什么以及为什么会这样做。该函数来自 JCrop，这是一个非常标准的 jQuery 裁剪插件。此函数负责计算如何在您打算裁剪的图像旁边显示一个小预览图像。您在图像上进行选择，然后预览会显示……嗯……预览。

这里是函数，来自 JCrop 的示例页面：

function showPreview(coords)

    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css(
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
        );

还需要注意的是，JCrop 实例有一个选项，其中纵横比设置为 1，preview div 的宽度为 100 像素，高度为 100 像素。

如果您想查看代码甚至尝试一下，这里有一个链接。

http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail

我不明白很多数字.. rx * 500？为什么？ ry * 370？为什么？非常感谢您从上到下遍历此逻辑。

【参考方案1】：

这些参数 500 和 370 是正在裁剪的图片的确切高度。演示中的那个是 500px 宽和 370px 高的。

在预览中（右侧）还显示了整个图片。当您更改选择时，它会更新图像的参数。您正在计算选择框的大小

 width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',

为了设置预览的高度。也可以通过这两个计算你离左侧和顶部的距离：

 marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'

它实际上是在计算所选区域的大小以及距离左上角的距离，以便将正确的参数发送到预览区域。

AspectRatio 实际上显示宽度/高度之间的比率 - 因此，如果您要裁剪 100x100 图片，则为 100/100 = 1 ，但如果您要裁剪 250x100 图片，则为 250/100 = 2.5。