javascript - アスペクト比を維持する

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

それらはあなたの寸法です。説明する必要がある画像の周りに余分な「スペース」がない場合、作業は完了です。それ以外の場合は、いくつかのケースを処理する必要があります。