Jquery imgare在预览不正常的情况下选择缩放图像

我一直在尝试让imgareaselect插件在缩放图像上工作，该图像使用css max-width:100%和max-height:100%动态缩放，以使其适合其容器

尝试：

正如您在上面的小提琴中看到的，预览在选择中没有显示相同的内容，请尝试选择树后面的地平线，您可以清楚地看到它

HTML:

CSS

---

你可以看到我正在尝试制作一个动态的纵横比，我认为它不起作用

因为

aspectRatio

用于强制选择宽高比

如果要使用css修改图像大小并精确剪切，则需要传递imageWidth和imageHeight：

$(selector).imgAreaSelect({
    imageWidth: 1920,
    imageHeight: 1080
});

---

因为

aspectRatio

用于强制选择宽高比

如果要使用css修改图像大小并精确剪切，则需要传递imageWidth和imageHeight：

$(selector).imgAreaSelect({
    imageWidth: 1920,
    imageHeight: 1080
});

---

也许我迟到了，但我明白了

如果预览容器是150px*150px，那么使用动态aspectRatio看起来不太好，您可以简单地将其设置为“1:1”

然后，您可以将预览功能更改为以下内容：

$('#preview').css({
    width: Math.round(scaleX * $("#croptarget").width())+"px",
    height: Math.round(scaleY * $("#croptarget").height())+"px",
    marginLeft: -Math.round(scaleX * selection.x1),
    marginTop: -Math.round(scaleY * selection.y1)
});

您需要获得较大的图像宽度和高度，因此该函数计算预览图像所需的不精确宽度和高度

---

这是你的

也许我迟到了，但我来了

如果预览容器是150px*150px，那么使用动态aspectRatio看起来不太好，您可以简单地将其设置为“1:1”

然后，您可以将预览功能更改为以下内容：

$('#preview').css({
    width: Math.round(scaleX * $("#croptarget").width())+"px",
    height: Math.round(scaleY * $("#croptarget").height())+"px",
    marginLeft: -Math.round(scaleX * selection.x1),
    marginTop: -Math.round(scaleY * selection.y1)
});

您需要获得较大的图像宽度和高度，因此该函数计算预览图像所需的不精确宽度和高度

这是你的

//static aspectRatio

$('#croptarget').imgAreaSelect({
    aspectRatio: "1:1",
    handles: true,
    fadeSpeed: 200,
    onSelectChange: preview
});

$('#preview').css({
    width: Math.round(scaleX * $("#croptarget").width())+"px",
    height: Math.round(scaleY * $("#croptarget").height())+"px",
    marginLeft: -Math.round(scaleX * selection.x1),
    marginTop: -Math.round(scaleY * selection.y1)
});