在调整大小的图像上使用jQuery imgAreaSelect

我用它来获取一个选择的坐标。但是，由于CSS中的“最大宽度：100%”行，坐标与原始图像大小不符

现在我有了一个可滚动父div的解决方案，这不是很酷。我试着做一些算法来计算新的坐标，但我再次看到，我的数学很差

---

有什么办法吗？或者你可能知道一个更好的插件（我不是在寻找裁剪图像，我只是想选择一些东西）

我也遇到了同样的问题，我这样做是为了解决这个问题：

var image = document.getElementById('yourImgId');

// Take the original size from image with naturalHeight - Width
var originalHeight = image.naturalHeight;
var originalWidth = image.naturalWidth;

// Show the original size in console to make sure is correct (optional):
console.log('IMG width: ' + originalWidth + ', height: ' + originalHeight);

// Enable imgAreaSelect on your image
$('yourImg#yourImgId').imgAreaSelect({
    aspectRatio: '1:1',
    handles: true,
    fadeSpeed: 200,
    imageHeight: originalHeight, 
    imageWidth: originalWidth,
    onSelectChange: getCoordinates // this function below
    });

然后处理原始尺寸：

function getCoordinates(img, selection) {

    if (!selection.width || !selection.height){
    return;
        }

    // With this two lines i take the proportion between the original size and
    // the resized img
    var porcX = img.naturalWidth / img.width;
    var porcY = img.naturalHeight / img.height;

    // Send the corrected coordinates to some inputs:
    // Math.round to get integer number
    // (selection.x1 * porcX) to correct the coordinate to real size
    $('input#x1').val(Math.round(selection.x1 * porcX));
    $('input#y1').val(Math.round(selection.y1 * porcY));
    $('input#x2').val(Math.round(selection.x2 * porcX));
    $('input#y2').val(Math.round(selection.y2 * porcY));
    $('input#w').val(Math.round(selection.width * porcX));
    $('input#h').val(Math.round(selection.height * porcY));
    }

---

我希望这对你有用

我放弃了imgAreaSelect。我的建议是：使用jCrop，因为它也提供了选择区域的功能（没有裁剪）嘿@kidkamek我知道已经好几年了，但我只想说干得好！这是很棒的东西。。获得真正的高度选择，这正是我想要的。“谢谢你，”基德卡梅克说。这是一些非常酷的代码。谢谢你的帮助。这真的救了我。我已经搜索修复程序3天了。我正要换成cropperjs，但不知怎么的，我找到了你的答案，这真的救了我一天。谢谢。