保持長寬比

Question

我正在使用圖像裁剪工具，圖像裁剪工具來自jCrop，我試圖讓用戶從比上傳的原始圖像小的作物中提取圖像。基本上，如果上傳風景圖像，我需要使圖像寬度爲304px，而不會改變鏡頭的高寬比。

例如，如果用戶上傳人像照片，則需要在不改變照片縱橫比的情況下製作237px圖像。

這可能嗎？我可以訪問我的代碼中的原始圖像大小，但是我無法確定我是否不改變高寬比？

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 

這些是你的尺寸。如果你的圖像周圍沒有任何額外的「空間」，那麼你的工作就完成了。否則，你需要處理一些情況。