javascript - 保持纵横比

Question

我目前正在开发一个图像裁剪工具，图像裁剪工具来自 jCrop，我试图使用户从中进行裁剪的图像小于上传的原始图像。基本上，如果上传横向图像，我需要在不改变镜头纵横比的情况下将图像设为 304 像素宽。

例如，如果用户上传了一张人像照片，我需要在不改变照片纵横比的情况下将图像设为 237 像素。

这可能吗？我可以在我的代码中访问原始图像尺寸，但我无法确定我没有改变纵横比？

Answer 1

是的，如果源图像已经足够宽，这是可能的。如果它不够宽，没有足够的数据可以裁剪，并且如果你想保持纵横比，你需要在裁剪之前放大图像。

这样的事情应该让你开始：

CropWidth=237;
AspectRatio= SourceWidth/SourceHeight; 
CropHeight = CropWidth*AspectRatio;

Answer 2

要正确保持纵横比，您应该使用 GCD：

function gcd(a, b) {
    return (b == 0) ? a : gcd(b, a % b);
}

然后你应该做这样的事情：

function calcRatio(objectWidth, objectHeight) {
    var ratio = gcd(objectWidth, objectHeight),
        xRatio = objectWidth / ratio,
        yRatio = objectHeight / ratio;
    return  { "x": xRatio, "y": yRatio };
}

这将为您提供某些对象的比率。您可以使用此信息来确定生成的图像应该有多大。

function findSize (targetHeight, xRatio, yRatio) { 
    var widthCalc = Math.round((xRatio * targetHeight) / yRatio);
    return { "width" : widthCalc, "height" : targetHeight };
} 

var test = calcRatio(1280,720),
    dimensions = findSize(400, test.x, test.y); 
    //400 is what we want the new height of the image to be

这些是你的尺寸。如果您的图像周围没有任何需要考虑的额外“空间”，那么您的工作就完成了。否则，您需要处理几个案例。