อัลกอริทึมในการคำนวณอัตราส่วนภาพคืออะไร?

Question 1

ฉันวางแผนที่จะใช้กับ JavaScript เพื่อครอบตัดรูปภาพให้พอดีกับหน้าต่างทั้งหมด

แก้ไข : ฉันจะใช้เป็นส่วนประกอบของบุคคลที่ 3 4:3ที่จะยอมรับเฉพาะอัตราส่วนในรูปแบบที่ชอบ: 16:9,

Question 2

ฉันรวบรวมว่าคุณกำลังมองหาinteger:integerโซลูชันอัตราส่วนภาพที่ใช้งานได้เช่น16:9แทนที่จะเป็นfloat:1โซลูชันเช่น1.77778:1.

ถ้าเป็นเช่นนั้นสิ่งที่คุณต้องทำคือหาตัวหารร่วมที่ยิ่งใหญ่ที่สุด (GCD) และหารค่าทั้งสอง GCD คือจำนวนสูงสุดที่หารทั้งสองจำนวนเท่า ๆ กัน ดังนั้น GCD สำหรับ 6 และ 10 คือ 2 GCD สำหรับ 44 และ 99 คือ 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));
}

และนี่คือ HTML / Javascript ที่สมบูรณ์ซึ่งแสดงวิธีหนึ่งในการตรวจจับขนาดหน้าจอและคำนวณอัตราส่วนภาพจากนั้น ผลงานใน FF3 นี้ผมไม่แน่ใจว่าการสนับสนุนเบราว์เซอร์อื่น ๆ ที่มีสำหรับและscreen.widthscreen.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

ฉันหวังว่าฉันจะมีเครื่องสุดท้ายที่บ้าน แต่ไม่น่าเสียดายที่มันเป็นเครื่องทำงาน

สิ่งที่คุณทำหากคุณพบว่าเครื่องมือปรับขนาดกราฟิกของคุณไม่รองรับอัตราส่วนภาพเป็นอีกเรื่องหนึ่ง ฉันสงสัยว่าทางออกที่ดีที่สุดคือการเพิ่มบรรทัดตัวอักษรมวย (เช่นเดียวกับที่คุณได้รับที่ด้านบนและด้านล่างของทีวีเครื่องเก่าเมื่อคุณดูภาพยนตร์จอกว้าง) ฉันจะเพิ่มไว้ที่ด้านบน / ด้านล่างหรือด้านข้าง (แล้วแต่ว่าข้อใดจะทำให้มีเส้นตัวอักษรน้อยที่สุด) จนกว่ารูปภาพจะตรงตามข้อกำหนด

สิ่งหนึ่งที่คุณอาจต้องการพิจารณาคือคุณภาพของภาพที่เปลี่ยนไปจาก 16: 9 เป็น 5: 4 - ฉันยังจำคาวบอยที่ผอมสูงอย่างไม่น่าเชื่อที่ฉันเคยดูในวัยเยาว์ทางโทรทัศน์ก่อนที่จะมีการเปิดตัวอักษรชกมวย คุณอาจจะดีกว่าถ้ามีภาพที่แตกต่างกันหนึ่งภาพต่ออัตราส่วนภาพและปรับขนาดให้ถูกต้องสำหรับขนาดหน้าจอจริงก่อนที่จะส่งลงสาย

Question 3

aspectRatio = width / height

ถ้านั่นคือสิ่งที่คุณต้องการ จากนั้นคุณสามารถคูณด้วยมิติใดมิติหนึ่งของพื้นที่เป้าหมายเพื่อค้นหาอีกมิติหนึ่ง (ที่รักษาอัตราส่วน) เช่น

widthT = heightT * aspectRatio
heightT = widthT / aspectRatio

Question 4

คำตอบของ paxdiablo นั้นยอดเยี่ยม แต่มีความละเอียดทั่วไปจำนวนมากที่มีพิกเซลมากหรือน้อยเพียงไม่กี่พิกเซลในทิศทางที่กำหนดและวิธีหารร่วมที่ยิ่งใหญ่ที่สุดให้ผลลัพธ์ที่น่ากลัวแก่พวกเขา

ยกตัวอย่างเช่นความละเอียด 1360x765 ซึ่งให้อัตราส่วน 16: 9 ที่ดีโดยใช้วิธี gcd จากข้อมูลของ 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

ฉันเขียนสคริปต์ python ที่แยกวิเคราะห์ไฟล์ข้อความที่มีการวางตัวเลขจากหน้าการสำรวจฮาร์ดแวร์ Steam และพิมพ์ความละเอียดทั้งหมดและอัตราส่วนที่ใกล้เคียงที่สุดรวมถึงความชุกของแต่ละอัตราส่วน (ซึ่งเป็นเป้าหมายของฉันเมื่อฉันเริ่มสิ่งนี้):

# 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):

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

Question 5

ฉันเดาว่าคุณต้องตัดสินใจว่า 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';
}

Question 6

นี่คือรุ่นของอัลกอริธึมการประมาณอย่างมีเหตุผลที่ดีที่สุดของ James Farey พร้อมระดับความเลือนลางที่ปรับได้ที่ส่งไปยังจาวาสคริปต์จากรหัสการคำนวณอัตราส่วนภาพเขียนด้วย python

วิธีการลอย (width/heightทศนิยม ) และขีด จำกัด บนสำหรับตัวเศษ / ตัวหาร

ในตัวอย่างด้านล่างฉันกำลังตั้งค่าขีด จำกัด สูงสุดของ50เพราะฉันต้องการ1035x582(1.77835051546) เพื่อให้ถือว่าเป็น16:9(1.77777777778) แทนที่จะ345:194ได้รับจากgcdอัลกอริทึมธรรมดาที่ระบุไว้ในคำตอบอื่น ๆ

<html>
<body>
<script type="text/javascript">
function aspect_ratio(val, lim) {

    var lower = [0, 1];
    var upper = [1, 0];

    while (true) {
        var mediant = [lower[0] + upper[0], lower[1] + upper[1]];

        if (val * mediant[1] > mediant[0]) {
            if (lim < mediant[1]) {
                return upper;
            }
            lower = mediant;
        } else if (val * mediant[1] == mediant[0]) {
            if (lim >= mediant[1]) {
                return mediant;
            }
            if (lower[1] < upper[1]) {
                return lower;
            }
            return upper;
        } else {
            if (lim < mediant[1]) {
                return lower;
            }
            upper = mediant;
        }
    }
}

document.write (aspect_ratio(800 / 600, 50) +"<br/>");
document.write (aspect_ratio(1035 / 582, 50) + "<br/>");
document.write (aspect_ratio(2560 / 1440, 50) + "<br/>");

    </script>
</body></html>

ผลลัพธ์:

 4,3  // (1.33333333333) (800 x 600)
 16,9 // (1.77777777778) (2560.0 x 1440)
 16,9 // (1.77835051546) (1035.0 x 582)

Question 7

ในกรณีที่คุณคลั่งไคล้การแสดง ...

วิธีที่เร็วที่สุด (ใน JavaScript) ในการคำนวณอัตราส่วนสี่เหลี่ยมผืนผ้าโดยใช้อัลกอริธึม Great Common Divisor ไบนารีที่แท้จริง

(ผู้อื่นทำการทดสอบความเร็วและเวลาทั้งหมดแล้วคุณสามารถตรวจสอบเกณฑ์มาตรฐานได้ที่นี่: https://lemire.me/blog/2013/12/26/fastest-way-to-compute-the-greatest-common-divisor / )

นี่คือ:

/* the binary Great Common Divisor calculator */
function gcd (u, v) {
    if (u === v) return u;
    if (u === 0) return v;
    if (v === 0) return u;

    if (~u & 1)
        if (v & 1)
            return gcd(u >> 1, v);
        else
            return gcd(u >> 1, v >> 1) << 1;

    if (~v & 1) return gcd(u, v >> 1);

    if (u > v) return gcd((u - v) >> 1, v);

    return gcd((v - u) >> 1, u);
}

/* returns an array with the ratio */
function ratio (w, h) {
	var d = gcd(w,h);
	return [w/d, h/d];
}

/* example */
var r1 = ratio(1600, 900);
var r2 = ratio(1440, 900);
var r3 = ratio(1366, 768);
var r4 = ratio(1280, 1024);
var r5 = ratio(1280, 720);
var r6 = ratio(1024, 768);


/* will output this: 
r1: [16, 9]
r2: [8, 5]
r3: [683, 384]
r4: [5, 4]
r5: [16, 9]
r6: [4, 3]
*/

ขยายข้อมูลโค้ด

Question 8

นี่คือวิธีแก้ปัญหาของฉันมันค่อนข้างตรงไปตรงมาเนื่องจากสิ่งที่ฉันสนใจไม่จำเป็นต้องเป็น GCD หรือแม้แต่อัตราส่วนที่ถูกต้อง: เพราะคุณจะได้รับสิ่งแปลก ๆ เช่น 345/113 ซึ่งไม่ใช่สิ่งที่มนุษย์เข้าใจได้

โดยพื้นฐานแล้วฉันตั้งค่าแนวนอนที่ยอมรับได้หรืออัตราส่วนแนวตั้งและ "ค่า" ของมันเป็นโฟลต ... จากนั้นฉันจะเปรียบเทียบอัตราส่วนโฟลตของฉันกับแต่ละอัตราส่วนและที่เคยมีความแตกต่างของค่าสัมบูรณ์ต่ำสุดคืออัตราส่วนที่ใกล้เคียงกับรายการมากที่สุด ด้วยวิธีนี้เมื่อผู้ใช้สร้างเป็น 16: 9 แต่ลบ 10 พิกเซลจากด้านล่างก็ยังนับเป็น 16: 9 ...

accepted_ratios = {
    'landscape': (
        (u'5:4', 1.25),
        (u'4:3', 1.33333333333),
        (u'3:2', 1.5),
        (u'16:10', 1.6),
        (u'5:3', 1.66666666667),
        (u'16:9', 1.77777777778),
        (u'17:9', 1.88888888889),
        (u'21:9', 2.33333333333),
        (u'1:1', 1.0)
    ),
    'portrait': (
        (u'4:5', 0.8),
        (u'3:4', 0.75),
        (u'2:3', 0.66666666667),
        (u'10:16', 0.625),
        (u'3:5', 0.6),
        (u'9:16', 0.5625),
        (u'9:17', 0.5294117647),
        (u'9:21', 0.4285714286),
        (u'1:1', 1.0)
    ),
}


def find_closest_ratio(ratio):
    lowest_diff, best_std = 9999999999, '1:1'
    layout = 'portrait' if ratio < 1.0 else 'landscape'
    for pretty_str, std_ratio in accepted_ratios[layout]:
        diff = abs(std_ratio - ratio)
        if diff < lowest_diff:
            lowest_diff = diff
            best_std = pretty_str
    return best_std


def extract_ratio(width, height):
    try:
        divided = float(width)/float(height)
        if divided == 1.0: return '1:1'
        return find_closest_ratio(divided)
    except TypeError:
        return None

Question 9

เพื่อเป็นทางเลือกอื่นในการค้นหา GCD ฉันขอแนะนำให้คุณตรวจสอบกับชุดของค่ามาตรฐาน คุณสามารถหารายชื่อในวิกิพีเดีย

Question 10

สมมติว่าคุณกำลังพูดถึงวิดีโอที่นี่ซึ่งในกรณีนี้คุณอาจต้องกังวลเกี่ยวกับอัตราส่วนพิกเซลของวิดีโอต้นทางด้วย ตัวอย่างเช่น.

PAL DV มีความละเอียด 720x576 ซึ่งจะมีลักษณะเหมือน 4: 3 ตอนนี้ขึ้นอยู่กับอัตราส่วนพิกเซล (PAR) อัตราส่วนหน้าจออาจเป็น 4: 3 หรือ 16: 9

สำหรับข้อมูลเพิ่มเติมโปรดดูที่นี่http://en.wikipedia.org/wiki/Pixel_aspect_ratio

คุณสามารถรับอัตราส่วนพิกเซลสี่เหลี่ยมจัตุรัสและวิดีโอบนเว็บจำนวนมากก็เป็นเช่นนั้น แต่คุณอาจต้องการระวังในกรณีอื่น ๆ

หวังว่านี่จะช่วยได้

เครื่องหมาย

Question 11

จากคำตอบอื่น ๆ นี่คือวิธีที่ฉันได้ตัวเลขที่ต้องการใน 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')}

Question 12

ฉันเชื่อว่าอัตราส่วนกว้างยาวหารด้วยความสูง

 r = w/h

Question 13

ฉันคิดว่าสิ่งนี้ทำในสิ่งที่คุณขอ:

webdeveloper.com - ทศนิยมเป็นเศษส่วน

ความกว้าง / ความสูงทำให้คุณได้รับทศนิยมโดยแปลงเป็นเศษส่วนโดย ":" แทนที่ "/" จะให้ "อัตราส่วน"

Question 14

อัลกอริทึมนี้ใน Pythonช่วยให้คุณมีส่วนร่วม

บอกฉันว่าจะเกิดอะไรขึ้นถ้าหน้าต่างมีขนาดตลก

บางทีสิ่งที่คุณควรมีคือรายการอัตราส่วนที่ยอมรับได้ทั้งหมด (ไปยังองค์ประกอบของบุคคลที่สาม) จากนั้นค้นหาคู่ที่ใกล้เคียงที่สุดกับหน้าต่างของคุณและส่งกลับอัตราส่วนนั้นจากรายการ

Question 15

เป็นวิธีที่แปลกเล็กน้อยในการทำเช่นนี้ แต่ใช้ความละเอียดเป็นด้าน เช่น

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);
  }
}

Question 16

function ratio(w, h) {
    function mdc(w, h) {
        var resto;
        do {
            resto = w % h;

            w = h;
            h = resto;

        } while (resto != 0);

        return w;
    }

    var mdc = mdc(w, h);


    var width = w/mdc;
    var height = h/mdc;

    console.log(width + ':' + height);
}

ratio(1920, 1080);

Question 17

ในกรณีของฉันฉันต้องการบางอย่างเช่น

[10,5,15,20,25] -> [2, 1, 3, 4, 5]

function ratio(array){
  let min = Math.min(...array);
  let ratio = array.map((element)=>{
    return element/min;
  });
  return ratio;
}
document.write(ratio([10,5,15,20,25]));  // [ 2, 1, 3, 4, 5 ]

ขยายข้อมูลโค้ด

Question 18

คุณสามารถเริ่มต้นด้วยการสร้างตารางการค้นหาตามอัตราส่วนทั่วไปได้ตลอดเวลา ตรวจสอบhttps://en.wikipedia.org/wiki/Display_aspect_ratioจากนั้นคุณสามารถทำการหาร

สำหรับปัญหาในชีวิตจริงคุณสามารถทำสิ่งต่างๆดังต่อไปนี้

let ERROR_ALLOWED = 0.05
let STANDARD_ASPECT_RATIOS = [
  [1, '1:1'],
  [4/3, '4:3'],
  [5/4, '5:4'],
  [3/2, '3:2'],
  [16/10, '16:10'],
  [16/9, '16:9'],
  [21/9, '21:9'],
  [32/9, '32:9'],
]
let RATIOS = STANDARD_ASPECT_RATIOS.map(function(tpl){return tpl[0]}).sort()
let LOOKUP = Object()
for (let i=0; i < STANDARD_ASPECT_RATIOS.length; i++){
  LOOKUP[STANDARD_ASPECT_RATIOS[i][0]] = STANDARD_ASPECT_RATIOS[i][1]
}

/*
Find the closest value in a sorted array
*/
function findClosest(arrSorted, value){
  closest = arrSorted[0]
  closestDiff = Math.abs(arrSorted[0] - value)
  for (let i=1; i<arrSorted.length; i++){
    let diff = Math.abs(arrSorted[i] - value)
    if (diff < closestDiff){
      closestDiff = diff
      closest = arrSorted[i]
    } else {
      return closest
    }
  }
  return arrSorted[arrSorted.length-1]
}

/*
Estimate the aspect ratio based on width x height (order doesn't matter)
*/
function estimateAspectRatio(dim1, dim2){
  let ratio = Math.max(dim1, dim2) / Math.min(dim1, dim2)
  if (ratio in LOOKUP){
    return LOOKUP[ratio]
  }

  // Look by approximation
  closest = findClosest(RATIOS, ratio)
  if (Math.abs(closest - ratio) <= ERROR_ALLOWED){
    return '~' + LOOKUP[closest]
  }

  return 'non standard ratio: ' + Math.round(ratio * 100) / 100 + ':1'
}

จากนั้นคุณก็ให้ขนาดตามลำดับใดก็ได้

estimateAspectRatio(1920, 1080) // 16:9
estimateAspectRatio(1920, 1085) // ~16:9
estimateAspectRatio(1920, 1150) // non standard ratio: 1.65:1
estimateAspectRatio(1920, 1200) // 16:10
estimateAspectRatio(1920, 1220) // ~16:10

Question 19

Width / Height

เหรอ?