मैं पूरी विंडो को फिट करने के लिए छवि को क्रॉप करने के लिए जावास्क्रिप्ट के साथ इसका उपयोग करने की योजना बना रहा हूं।
संपादित करें : मैं एक तीसरे पक्ष के घटक का उपयोग करूंगा जो केवल स्वरूप में पहलू अनुपात को स्वीकार करता है जैसे: 4:3
, 16:9
।
मैं पूरी विंडो को फिट करने के लिए छवि को क्रॉप करने के लिए जावास्क्रिप्ट के साथ इसका उपयोग करने की योजना बना रहा हूं।
संपादित करें : मैं एक तीसरे पक्ष के घटक का उपयोग करूंगा जो केवल स्वरूप में पहलू अनुपात को स्वीकार करता है जैसे: 4:3
, 16:9
।
जवाबों:
मैं इकट्ठा करता हूं कि आप integer:integer
जैसे समाधान के 16:9
बजाय एक उपयोगी पहलू अनुपात समाधान की तलाश कर रहे float:1
हैं 1.77778:1
।
यदि हां, तो आपको जो करने की आवश्यकता है वह सबसे बड़ा सामान्य भाजक (GCD) है और उसके द्वारा दोनों मानों को विभाजित करें। GCD उच्चतम संख्या है जो समान रूप से दोनों संख्याओं को विभाजित करती है। तो 6 और 10 के लिए GCD 2 है, 44 और 99 के लिए GCD 11 है।
उदाहरण के लिए, एक 1024x768 मॉनिटर में 256 का GCD है। जब आप दोनों मानों को विभाजित करते हैं तो आपको 4x3 या 4: 3 मिलता है।
ए (पुनरावर्ती) जीसीडी एल्गोरिथ्म:
function gcd (a,b):
if b == 0:
return a
return gcd (b, a mod b)
सी में:
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 / जावास्क्रिप्ट है जो स्क्रीन आकार का पता लगाने और उस से पहलू अनुपात की गणना करने का एक तरीका दिखाता है। यह 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
काश, मेरे पास घर पर ऐसा हो, लेकिन नहीं, यह दुर्भाग्य से एक काम करने वाली मशीन है।
आप क्या करते हैं अगर आपको यह पता चलता है कि पहलू अनुपात आपके ग्राफिक आकार परिवर्तन उपकरण द्वारा समर्थित नहीं है तो यह और बात है। मुझे संदेह है कि लेटर-बॉक्सिंग लाइनों को जोड़ने के लिए सबसे अच्छी शर्त होगी (जैसे कि आप अपने पुराने टीवी के ऊपर और नीचे मिलते हैं, जब आप उस पर एक चौड़ी स्क्रीन वाली फिल्म देख रहे हों)। जब तक छवि आवश्यकताओं को पूरा नहीं करती, मैं उन्हें ऊपर / नीचे या किनारों पर (पत्र-मुक्केबाजी लाइनों की कम से कम संख्या में एक परिणाम प्राप्त करता हूं) जोड़ दूंगा।
एक बात जिस पर आप विचार करना चाहते हैं, वह 16: 9 से 5: 4 - 4 से बदली हुई तस्वीर की गुणवत्ता है - मुझे अभी भी अविश्वसनीय रूप से लंबे, पतले काउबॉय याद हैं, जिन्हें मैं लेटर-बॉक्सिंग शुरू होने से पहले टीवी पर अपनी जवानी में देखता था। आप प्रति पहलू अनुपात में एक अलग छवि रखने से बेहतर हो सकते हैं और तार भेजने से पहले वास्तविक स्क्रीन आयामों के लिए सही एक का आकार बदलें।
728x90
-> 364:45
यह सुनिश्चित नहीं है कि वांछित परिणाम है
paxdiablo का जवाब बहुत अच्छा है, लेकिन बहुत सारे सामान्य संकल्प हैं जो किसी दिए गए दिशा में बस कुछ अधिक या कम पिक्सेल हैं, और सबसे बड़ा सामान्य विभाजक दृष्टिकोण उनके लिए भयानक परिणाम देता है।
उदाहरण के लिए 1360x765 का अच्छा व्यवहार किया गया संकल्प लें, जो कि जीसीडी अप्रोच का उपयोग करके एक अच्छा 16: 9 अनुपात देता है। स्टीम के अनुसार, इस रिज़ॉल्यूशन का उपयोग केवल 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 के अनुपात में गोल करना चाहेंगे।
मैंने एक पाइथन स्क्रिप्ट लिखी जो स्टीम हार्डवेयर सर्वेक्षण पृष्ठ से पेस्ट की गई संख्याओं के साथ एक पाठ फ़ाइल को पार्स करती है, और सभी रिज़ॉल्यूशन और निकटतम ज्ञात अनुपातों को प्रिंट करती है, साथ ही प्रत्येक अनुपात की व्यापकता (जो कि मैंने शुरू होने पर मेरा लक्ष्य था):
# 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]) + '%')
जिज्ञासु के लिए, ये स्टीम उपयोगकर्ताओं (अक्टूबर 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%
मुझे लगता है कि आप तय करना चाहते हैं कि 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';
}
यहाँ जेम्स फेरी के सर्वश्रेष्ठ तर्कसंगत सन्निकटन एल्गोरिथ्म का एक संस्करण है जिसमें पहलू अनुपात गणना कोड से जावास्क्रिप्ट के लिए पोर्ट किए गए फ़िज़नेस के समायोज्य स्तर को शामिल किया गया है जो मूल रूप से अजगर में लिखा गया है।
विधि एक width/height
अंश ( ) और अंश अंश / हर के लिए एक ऊपरी सीमा लेती है ।
नीचे दिए गए उदाहरण में मैं एक ऊपरी सीमा निर्धारित 50
कर रहा हूं क्योंकि मुझे 1035x582
(1.77835051546) की जरूरत है (1.77777777778) जिसके 16:9
बजाय 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)
बस के मामले में आप एक प्रदर्शन सनकी रहे हैं ...
आयत अनुपात की गणना करने का सबसे तेज़ तरीका (जावास्क्रिप्ट में) यह एक सच्चे द्विआधारी ग्रेट कॉमन डिवाइज़र एल्गोरिथ्म का उपयोग करता है।
(सभी गति और समय परीक्षण दूसरों द्वारा किए गए हैं, आप यहां एक बेंचमार्क की जांच कर सकते हैं: 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]
*/
यहाँ मेरा समाधान है यह बहुत सीधा है क्योंकि मुझे परवाह है कि जरूरी नहीं है कि जीसीडी या सटीक अनुपात है: क्योंकि तब आपको 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
जीसीडी खोज के वैकल्पिक समाधान के रूप में, मैं आपको मानक मूल्यों के एक सेट के खिलाफ जांच करने का सुझाव देता हूं। आप विकिपीडिया पर एक सूची पा सकते हैं ।
Im यहाँ वीडियो के बारे में अपनी बात मानते हुए, जिस स्थिति में आपको स्रोत वीडियो के पिक्सेल पहलू अनुपात के बारे में भी चिंता करने की आवश्यकता हो सकती है। उदाहरण के लिए।
PAL DV 720x576 के रिज़ॉल्यूशन में आता है। जो इसके 4: 3 जैसा दिखेगा। अब पिक्सेल पहलू अनुपात (PAR) के आधार पर स्क्रीन अनुपात 4: 3 या 16: 9 हो सकता है।
अधिक जानकारी के लिए यहां देखें http://en.wikipedia.org/wiki/Pixel_aspect_ratio
आप स्क्वायर पिक्सेल एस्पेक्ट रेशियो प्राप्त कर सकते हैं, और बहुत सारे वेब वीडियो वह है, लेकिन आप अन्य मामलों से बाहर देखना चाहते हैं।
उम्मीद है की यह मदद करेगा
निशान
अन्य उत्तरों के आधार पर, यहां बताया गया है कि पायथन में मुझे कितने नंबर चाहिए थे;
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')}
मेरा मानना है कि पहलू अनुपात चौड़ाई ऊंचाई से विभाजित है।
r = w/h
मुझे लगता है कि यह वही करता है जो आप पूछ रहे हैं:
webdeveloper.com - दशमलव से अंश तक
चौड़ाई / ऊंचाई आपको एक दशमलव मिलती है, जिसे "/" के स्थान पर ":" के साथ एक अंश में परिवर्तित किया जाता है, जो आपको "अनुपात" देता है।
पायथन में यह एल्गोरिथ्म आपको वहां के रास्ते का हिस्सा मिल जाता है।
मुझे बताओ कि क्या होता है अगर खिड़कियां एक अजीब आकार है।
हो सकता है कि आपके पास जो कुछ होना चाहिए, वह सभी स्वीकार्य अनुपातों की एक सूची हो (तीसरे पक्ष के घटक के लिए)। फिर, अपनी विंडो के सबसे निकटतम मिलान का पता लगाएं और सूची से उस अनुपात को वापस करें।
मेरे मामले में मुझे कुछ पसंद है
[१०,५,१५,२०,२५] -> [२, १, ३, ४, ५]
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 ]
आप हमेशा सामान्य पहलू अनुपात के आधार पर एक लुकअप तालिका बनाकर शुरू कर सकते हैं। 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
Width / Height
?