Javascript 保持纵横比

目前我正在开发一个图像裁剪工具，图像裁剪工具来自jCrop，我试图使用户从中获取的图像比原始上传的图像更小。基本上，如果上传一个横向图像，我需要使图像304px宽，而不改变快照的纵横比

例如，如果用户上传一张肖像照片，我需要在不改变照片纵横比的情况下制作237px的图像

---

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

是的，如果源图像已经足够宽，这是可能的。如果图像不够宽，则没有足够的数据进行裁剪，如果希望保持纵横比，则需要在裁剪之前放大图像

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

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

---

要正确保持纵横比，应使用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

这些是你的维度。如果你没有任何额外的“空间”在你的图像周围，你需要解释，那么你的工作就完成了。否则你需要处理几个案子