如果调整图像大小，Jcrop 问题 - Jquery

Posted 2023-02-25

【中文标题】如果调整图像大小，Jcrop 问题 - Jquery

【英文标题】：Jcrop issue if image is resized - Jquery

【发布时间】：2014-10-30 00:06:37

【问题描述】：

我正在使用 Jquery UI 来调整图像大小。因此，如果有任何图像，那么用户可以使用 JQuery UI 调整图像大小，然后我使用 JCrop 来裁剪图像。所以问题是当用户调整图像大小然后在图像调整大小后裁剪图像然后由于某种原因Jcrop选择原始大小的图像。有没有办法告诉 JCrop 选择调整大小的图像尺寸进行裁剪？ 请看附图。

$('img').Jcrop(
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50]
);

function showPreview(c) 
    if (parseInt(c.w) > 0) 
        // Show image preview
        var imageObj = $('img')[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
        cropWidth = c.w;
        cropHeight = c.h;
    

请查看 JsFiddle 链接 http://jsfiddle.net/mpvPC/106/。正如您注意到的那样，如果您删除宽度和高度，我已经在图像上调整了宽度和高度，然后它就可以正常工作了

【问题讨论】：

您没有向我们展示任何代码，这很可能是编码问题 - 不是吗？

这是我的代码.. 但这不是代码问题，因为如果我不调整图像大小，JCrop 可以正常工作，但是一旦调整图像大小，它只会选择图像的原始尺寸而不是调整大小。

有一个小提琴可以给我们做个例子吗？

嗨@Adjit，请检查jsFiddle链接jsfiddle.net/mpvPC/106。正如你所看到的，如果你从图像中删除宽度和高度，我已经在图像上放置了宽度和高度来调整它的大小，那么它工作正常

不太确定您在说什么。你是说裁剪区域没有正确转置？

【参考方案1】：

我想出了解决办法。我刚刚使用了trueSize。请检查我下面的代码。

$('image').Jcrop(
    onChange: showPreview,
    onSelect: showPreview,
    setSelect: [100, 100, 50, 50],
    trueSize: [originalImageWidth, originalImageHeight] // use Original Image dimensions not resized one
);