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

Question

我正在使用imgareaselect来获取选择的坐标.但是,由于"最大宽度:100%;" 在我的CSS中,原始图像大小的坐标是错误的.

现在我有一个可滚动的父div的解决方案,这不是很酷.我试着制作一些算法来计算新的坐标,但我再次看到,我在数学方面非常糟糕.

任何想法如何做到这一点？或者你可能知道一个更好的插件(我不是在寻找裁剪图像,我只想选择一些东西)

Answer 1

我遇到了同样的问题并且做了这个来解决它:

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

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

// Show original size in console to make sure is correct (optional):
console.log('IMG width: ' + originalWidth + ', heigth: ' + 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));
    }

我希望这对你有用!