javascript - アスペクト比を計算するアルゴリズムは何ですか?

Question

これを JavaScript と共に使用して、ウィンドウ全体に合わせて画像をトリミングする予定です。

編集：次のような形式のアスペクト比のみを受け入れるサードパーティのコンポーネントを使用し4:3ます16:9。

〜12歳の編集：この種の質問はかなり興味深いです！ここに何かありますよね？絶対！

score 223 · Accepted Answer

のようなソリューションではなく、のinteger:integerような使用可能なアスペクト比のソリューションを探していると思います。16:9float:11.77778:1

もしそうなら、あなたがする必要があるのは、最大公約数（GCD）を見つけて、それで両方の値を割ります. GCD は、両方の数値を均等に分割する最大の数値です。したがって、6 と 10 の GCD は 2、44 と 99 の GCD は 11 です。

たとえば、1024x768 モニターの GCD は 256 です。両方の値をそれで割ると、4x3 または 4:3 になります。

(再帰的) GCD アルゴリズム:

function gcd (a,b):
    if b == 0:
        return a
    return gcd (b, a mod b)

C:

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

int main(void) {
    printf ("gcd(1024,768) = %d\n",gcd(1024,768));
}

画面サイズを検出し、そこから縦横比を計算する 1 つの方法を示す完全な HTML/Javascript を次に示します。これは FF3 で動作しますが、他のブラウザーがscreen.widthおよびに対してどのようなサポートを提供しているかはわかりませんscreen.height。

<html><body>
    <script type="text/javascript">
        function gcd (a, b) {
            return (b == 0) ? a : gcd (b, a%b);
        }
        var w = screen.width;
        var h = screen.height;
        var r = gcd (w, h);
        document.write ("<pre>");
        document.write ("Dimensions = ", w, " x ", h, "<br>");
        document.write ("Gcd        = ", r, "<br>");
        document.write ("Aspect     = ", w/r, ":", h/r);
        document.write ("</pre>");
    </script>
</body></html>

それは（私の奇妙なワイドスクリーンモニターで）出力します：

Dimensions = 1680 x 1050
Gcd        = 210
Aspect     = 8:5

私がこれをテストした他のもの：

Dimensions = 1280 x 1024
Gcd        = 256
Aspect     = 5:4

Dimensions = 1152 x 960
Gcd        = 192
Aspect     = 6:5

Dimensions = 1280 x 960
Gcd        = 320
Aspect     = 4:3

Dimensions = 1920 x 1080
Gcd        = 120
Aspect     = 16:9

最後の 1 台が家にあればいいのにと思いますが、残念ながら仕事用の機械です。

グラフィックのサイズ変更ツールでアスペクト比がサポートされていないことがわかった場合の対処方法は別の問題です。レターボックスラインを追加するのが最善の策だと思います（ワイドスクリーンの映画を見ているときに古いテレビの上部と下部に表示されるようなものです）。画像が要件を満たすまで、上部/下部または側面 (レターボックス行の数が最も少ない方) にそれらを追加します。

考慮すべきことの 1 つは、16:9 から 5:4 に変更された画像の品質です。レターボックスが導入される前に、若い頃にテレビで見た信じられないほど背が高くて細いカウボーイを今でも覚えています。アスペクト比ごとに1つの異なる画像を用意し、実際の画面サイズに合わせて正しいサイズを変更してから送信する方がよい場合があります。

score 63 · Accepted Answer

aspectRatio = width / height

それがあなたの求めているものなら。次に、ターゲット空間の次元の1つを掛けて、他の（比率を維持する）を見つけることができます。

widthT = heightT * aspectRatio
heightT = widthT / aspectRatio

score 16 · Accepted Answer

paxdiabloの答えは素晴らしいですが、特定の方向にわずか数ピクセルしかない一般的な解像度がたくさんあり、最大公約数のアプローチはそれらに恐ろしい結果をもたらします。

たとえば、gcd アプローチを使用して適切な 16:9 の比率を提供する 1360x765 の適切に動作する解像度を考えてみましょう。Steam によると、この解像度はユーザーの 0.01% しか使用されていませんが、1366x768 はなんと 18.9% が使用しています。gcd アプローチを使用して得られる結果を見てみましょう。

1360x765 - 16:9 (0.01%)
1360x768 - 85:48 (2.41%)
1366x768 - 683:384 (18.9%)

その 683:384 の比率を、最も近い 16:9 の比率に切り上げたいと思います。

Steam ハードウェア調査ページから貼り付けられた数値を含むテキストファイルを解析し、すべての解像度と最も近い既知の比率、および各比率の普及率を出力する Python スクリプトを作成しました (これは、これを開始したときの私の目標でした)。

# Contents pasted from store.steampowered.com/hwsurvey, section 'Primary Display Resolution'
steam_file = './steam.txt'

# Taken from http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Vector_Video_Standards4.svg/750px-Vector_Video_Standards4.svg.png
accepted_ratios = ['5:4', '4:3', '3:2', '8:5', '5:3', '16:9', '17:9']

#-------------------------------------------------------
def gcd(a, b):
    if b == 0: return a
    return gcd (b, a % b)

#-------------------------------------------------------
class ResData:

    #-------------------------------------------------------
    # Expected format: 1024 x 768 4.37% -0.21% (w x h prevalence% change%)
    def __init__(self, steam_line):
        tokens = steam_line.split(' ')
        self.width  = int(tokens[0])
        self.height = int(tokens[2])
        self.prevalence = float(tokens[3].replace('%', ''))

        # This part based on pixdiablo's gcd answer - http://stackoverflow.com/a/1186465/828681
        common = gcd(self.width, self.height)
        self.ratio = str(self.width / common) + ':' + str(self.height / common)
        self.ratio_error = 0

        # Special case: ratio is not well behaved
        if not self.ratio in accepted_ratios:
            lesser_error = 999
            lesser_index = -1
            my_ratio_normalized = float(self.width) / float(self.height)

            # Check how far from each known aspect this resolution is, and take one with the smaller error
            for i in range(len(accepted_ratios)):
                ratio = accepted_ratios[i].split(':')
                w = float(ratio[0])
                h = float(ratio[1])
                known_ratio_normalized = w / h
                distance = abs(my_ratio_normalized - known_ratio_normalized)
                if (distance < lesser_error):
                    lesser_index = i
                    lesser_error = distance
                    self.ratio_error = distance

            self.ratio = accepted_ratios[lesser_index]

    #-------------------------------------------------------
    def __str__(self):
        descr = str(self.width) + 'x' + str(self.height) + ' - ' + self.ratio + ' - ' + str(self.prevalence) + '%'
        if self.ratio_error > 0:
            descr += ' error: %.2f' % (self.ratio_error * 100) + '%'
        return descr

#-------------------------------------------------------
# Returns a list of ResData
def parse_steam_file(steam_file):
    result = []
    for line in file(steam_file):
        result.append(ResData(line))
    return result

#-------------------------------------------------------
ratios_prevalence = {}
data = parse_steam_file(steam_file)

print('Known Steam resolutions:')
for res in data:
    print(res)
    acc_prevalence = ratios_prevalence[res.ratio] if (res.ratio in ratios_prevalence) else 0
    ratios_prevalence[res.ratio] = acc_prevalence + res.prevalence

# Hack to fix 8:5, more known as 16:10
ratios_prevalence['16:10'] = ratios_prevalence['8:5']
del ratios_prevalence['8:5']

print('\nSteam screen ratio prevalences:')
sorted_ratios = sorted(ratios_prevalence.items(), key=lambda x: x[1], reverse=True)
for value in sorted_ratios:
    print(value[0] + ' -> ' + str(value[1]) + '%')

興味深いことに、これらは Steam ユーザーの画面比率の普及率です (2012 年 10 月現在):

16:9 -> 58.9%
16:10 -> 24.0%
5:4 -> 9.57%
4:3 -> 6.38%
5:3 -> 0.84%
17:9 -> 0.11%

score 12 · Accepted Answer

4:3 と 16:9 のどちらが最適かを判断する必要があると思います。

function getAspectRatio(width, height) {
    var ratio = width / height;
    return ( Math.abs( ratio - 4 / 3 ) < Math.abs( ratio - 16 / 9 ) ) ? '4:3' : '16:9';
}

score 1 · Accepted Answer

他の回答に基づいて、Python で必要な数値を取得する方法を次に示します。

from decimal import Decimal

def gcd(a,b):
    if b == 0:
        return a
    return gcd(b, a%b)

def closest_aspect_ratio(width, height):
    g = gcd(width, height)
    x = Decimal(str(float(width)/float(g)))
    y = Decimal(str(float(height)/float(g)))
    dec = Decimal(str(x/y))
    return dict(x=x, y=y, dec=dec)

>>> closest_aspect_ratio(1024, 768)
{'y': Decimal('3.0'), 
 'x': Decimal('4.0'), 
 'dec': Decimal('1.333333333333333333333333333')}

score 1 · Accepted Answer

GCD 検索の代替ソリューションとして、一連の標準値と照合することをお勧めします。Wikipediaでリストを見つけることができます。

score 1 · Accepted Answer

ここでビデオについて話していると仮定します。その場合、ソースビデオのピクセルアスペクト比についても考慮する必要があるかもしれません。例えば。

PAL DV の解像度は 720x576 です。これは 4:3 のように見えます。現在、ピクセルアスペクト比 (PAR) に応じて、画面の比率は 4:3 または 16:9 のいずれかになります。

詳細については、こちらをご覧ください http://en.wikipedia.org/wiki/Pixel_aspect_ratio

正方形ピクセルのアスペクト比を取得できます。多くの Web ビデオはそれですが、それ以外の場合は注意が必要です。

お役に立てれば

マーク

score 0 · Accepted Answer

これはあなたが求めていることをしていると思います：

webdeveloper.com - 小数から分数へ

幅/高さは小数を取得し、「/」の代わりに「:」を使用して分数に変換すると「比率」が得られます。

score 0 · Accepted Answer

Python のこのアルゴリズムは、そこへの道のりの一部を提供します。

窓が変なサイズだとどうなるか教えてください.

たぶん、あなたが持っているべきものは、（サードパーティのコンポーネントに対する）すべての許容比率のリストです。次に、ウィンドウに最も近いものを見つけて、リストからその比率を返します。

score 0 · Accepted Answer

これを行うには少し奇妙な方法ですが、解像度をアスペクトとして使用します。例えば

1024:768

またはあなたが試すことができます

var w = screen.width;
var h = screen.height;
for(var i=1,asp=w/h;i<5000;i++){
  if(asp*i % 1==0){
    i=9999;
    document.write(asp*i,":",1*i);
  }
}

score -1 · Accepted Answer

-1

アスペクト比は、幅を高さで割ったものだと思います。

 r = w/h

于 2009-07-27T04:24:17.343 に答える

score -3 · Accepted Answer

-3

Width / Height

?

于 2009-07-27T04:22:26.367 に答える

javascript - アスペクト比を計算するアルゴリズムは何ですか?

18 に答える 18

Related

Reference