मूल पहलू अनुपात

Question

पर एक प्रदर्शित छवि को "स्मार्ट आकार बदलें" कैसे करें मेरे पास एक ऐसा एप्लिकेशन है जिसमें अंत उपयोगकर्ता एक डिजाइनर में छवियों का आकार और स्थिति बना सकते हैं। चूंकि spec छवि को उस नियंत्रण में "विस्तारित" करने के लिए कहता है, इसलिए अंतिम उपयोगकर्ता एक अजीब रूप से फैली हुई छवि के साथ समाप्त हो सकता है।

छवि आकार देने वाले उपयोगकर्ता की सहायता के लिए मैं एक स्मार्ट रेजिज़र फ़ंक्शन को कार्यान्वित करने के बारे में सोच रहा हूं जो उपयोगकर्ता को तस्वीर के पहलू अनुपात को आसानी से ठीक करने की अनुमति देगा ताकि यह अब तक फैला न हो।

इसे हल करने का त्वरित तरीका वास्तव में दो विकल्प प्रदान करना है: 1) चौड़ाई से स्केल 2) ऊंचाई से पैमाने। उपयोगकर्ता विधि चुनता है और एल्गोरिदम मूल पहलू अनुपात का उपयोग कर चित्र के आकार को समायोजित करता है। उदाहरण के लिए: डिजाइनर पर 200x200 के रूप में एक चित्र प्रदर्शित होता है लेकिन मूल छवि 1024x768 पिक्सेल है। उपयोगकर्ता "चौड़ाई से स्मार्ट आकार" चुनता है और नया आकार ~ 200x150 बन जाता है क्योंकि मूल पहलू अनुपात ~ 1.333

यह ठीक है, लेकिन मैं एल्गोरिदम को कैसे समझ सकता हूं और उपयोगकर्ता को परेशान नहीं कर सकता कि यह आयाम पुनर्मूल्यांकन पर आधारित होना चाहिए?

Answer 1

मैं अपनी कल्पना को सही ढंग से व्याख्या कर रहा हूँ, तो आप एक परिणाम है कि अंतिम उपयोगकर्ता रखी से अधिक की नहीं चाहते मूल रूप से बाहर; आप दो आयामों में से एक को हटाना चाहते हैं, और दूसरा एक ही रहना चाहता है। दूसरे शब्दों में, नए आकार को डिजाइनर स्पेस को एक दिशा में भरना चाहिए जबकि मूल पहलू अनुपात को बनाए रखने के लिए दूसरे दिशा में आकार को छोटा करना चाहिए।

original_ratio = original_width/original_height 
designer_ratio = designer_width/designer_height 
if original_ratio > designer_ratio 
    designer_height = designer_width/original_ratio 
else 
    designer_width = designer_height * original_ratio 

अक्सर आप पूर्णांक निर्देशांक के साथ काम करेंगे, लेकिन डिवीजनों चल बिन्दु होने की जरूरत ऊपर अनुपात का उत्पादन करने के लिए। फार्मूला का एक पुनर्गठन यहां अधिक पूर्णांक अनुकूल है। सुनिश्चित करें कि आपके पूर्णांक की अधिकतम चौड़ाई * ऊंचाई को संभालने की सीमा है।

if original_width * designer_height > designer_width * original_height 
    designer_height = (designer_width * original_height)/original_width 
else 
    designer_width = (designer_height * original_width)/original_height 

Answer 2

दोनों प्रकारों ("चौड़ाई से पैमाने" और "ऊंचाई से पैमाने") के लिए नए आयामों की गणना करें, फिर प्रदर्शन में फिट बैठने वाले व्यक्ति का उपयोग करें।

वैकल्पिक रूप से आप "बाउंडिंग बॉक्स" के पहलू अनुपात की गणना भी कर सकते हैं और मूल छवि के पहलू अनुपात के साथ इसकी तुलना कर सकते हैं। किस पहलू अनुपात के आधार पर बड़ा है, ऊंचाई या चौड़ाई को स्केल किया जाना चाहिए।

आप आकार बदलने की प्रक्रिया को भी प्रतिबंधित कर सकते हैं ताकि सभी मामलों में "चौड़ाई से पैमाने" किया जा सके। फिर, छवि के आकार को बदलने के लिए, उपयोगकर्ता को हमेशा इसकी चौड़ाई बदलनी होगी। ऊंचाई हमेशा स्वचालित रूप से समायोजित किया जाएगा।

Answer 3

क्योंकि आप अपनी खिड़की में स्केल की गई छवि (मूल के) जितना संभव हो उतना दिखाना चाहते हैं, यानि आपके डिजाइनर के क्षेत्र में, आप मूल छवि की चौड़ाई या ऊंचाई का बड़ा हिस्सा लेंगे, और पैमाने पर है कि 200 छद्म कोड (चौड़ाई, ऊँचाई हैं मूल के आयामों):

if (width > height) { 
    scaledWidth = 200; 
    scaledHeight = (height * 200)/width; 
} else { 
    scaledHeight = 200; 
    scaledWidth = (width * 200)/height; 
} 

Answer 4

तुम बस वहाँ प्रतिलिपि की राशि के लिए कोई लेखा है और वहाँ बाहर pasters हाँ पैमाने दोनों आयामों के लिए आवश्यक बाहर काम और उसके बाद 2.

Answer 5

के छोटे लेने के लिए की जरूरत है! मैं यह भी जानना चाहता था और मैंने जो कुछ देखा वह चौड़ाई या ऊंचाई स्केलिंग के अंतहीन उदाहरण थे .. जो दूसरे को बहने वाला चाहते हैं ?!छवियों तो चौड़ाई के लिए

• आकार चौड़ाई और ऊंचाई एक पाश के लिए की जरूरत
• छवियों मूल आयाम
• गणित है जो ठीक से ऊंचाई के लिए यानी चौड़ाई/पहलू काम करता है का उपयोग करता है से अधिक नहीं है बिना, और ऊंचाई * पहलू वास्तव में ठीक तरह से कर दिया जाता है और नीचे:/

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight) 
{ 
    double srcWidth = img.Source.Width; 
    double srcHeight = img.Source.Height; 

    double resizeWidth = srcWidth; 
    double resizeHeight = srcHeight; 

    double aspect = resizeWidth/resizeHeight; 

    if (resizeWidth > maxWidth) 
    { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
    } 
    if (resizeHeight > maxHeight) 
    { 
     aspect = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
    } 

    img.Width = resizeWidth; 
    img.Height = resizeHeight; 
} 

Answer 6

यहाँ एक समाधान मैं इस समस्या से निपटने के साथ आया था। बहुत छोटा और सीधा इमो चालू कर दिया, बस इसे साझा करना चाहता था।

हैंडी "सूत्रों": ratio = W/H→W = H * ratio→

1. अनुपात की गणना।
2. यदि आप चौड़ाई को नई आकार चौड़ाई (अधिकतम अनुमत चौड़ाई) पर सेट करेंगे तो छवि की ऊंचाई की गणना करें।
3. छवि की चौड़ाई की गणना करें यदि आप ऊंचाई को नई आकार की ऊंचाई (अधिकतम अनुमत ऊंचाई) पर सेट करेंगे।
4. देखें कि कौन से आकार किसी भी आयाम में अधिकतम आकार को ओवरराइड नहीं करते हैं। यदि अनुपात 1 उनमें से एक नहीं है तो हमेशा गलत होगा और हमेशा सही होगा।

जावास्क्रिप्ट

// Returns array with new width and height 
function proportionalScale(originalSize, newSize) 
{ 
    var ratio = originalSize[0]/originalSize[1]; 

    var maximizedToWidth = [newSize[0], newSize[0]/ratio]; 
    var maximizedToHeight = [newSize[1] * ratio, newSize[1]]; 

    if (maximizedToWidth[1] > newSize[1]) { return maximizedToHeight; } 
    else { return maximizedToWidth; } 
} 

originalSize और newSize में एक सरणी [0] = width, [1] = height

Answer 7

ऊपर सुझाव लिया और यह अधिकतम ऊंचाई/चौड़ाई के भीतर/नीचे पैमाने बनाई गई है। यहाँ यह के लिए अजगर कोड और चीजों घूर्णन जबकि limites भीतर रखने के लिए भी कहा समर्थन:

डीईएफ़ नया आकार दें (छवि, आयाम, बारी बारी से = कोई नहीं): निर्दिष्ट करने के लिए "" " एक छवि का आकार बदलता है अधिक से अधिक निकट होने के लिए आयाम। छवि django छवि-मॉडल-फ़ील्ड है।

Will both scale up and down the image to meet this while keeping the proportions 
    in width and height 

""" 

if image and os.path.isfile(image.path): 

    im = pil.open(image.path) 
    logging.debug('resizing image from %s x %s --> %s x %s ' % (im.size[0], im.size[1], dimensions[0], dimensions[1])) 

    if rotate: 
     logging.debug('first rotating image %s' % rotate) 
     im = im.rotate(90) 

    srcWidth = Decimal(im.size[0]) 
    srcHeight = Decimal(im.size[1]) 

    resizeWidth = srcWidth 
    resizeHeight = srcHeight 

    aspect = resizeWidth/resizeHeight # Decimal 

    logging.debug('resize aspect is %s' % aspect) 

    if resizeWidth > dimensions[0] or resizeHeight > dimensions[1]: 
     # if width or height is bigger we need to shrink things 
     if resizeWidth > dimensions[0]: 
      resizeWidth = Decimal(dimensions[0]) 
      resizeHeight = resizeWidth/aspect 

     if resizeHeight > dimensions[1] : 
      aspect = resizeWidth/resizeHeight 
      resizeHeight = Decimal(dimensions[1]) 
      resizeWidth = resizeHeight * aspect 

    else: 
     # if both width and height are smaller we need to increase size 
     if resizeWidth < dimensions[0]: 
      resizeWidth = Decimal(dimensions[0]) 
      resizeHeight = resizeWidth/aspect 

     if resizeHeight > dimensions[1] : 
      aspect = resizeWidth/resizeHeight 
      resizeHeight = Decimal(dimensions[1]) 
      resizeWidth = resizeHeight * aspect 

    im = im.resize((resizeWidth, resizeHeight), pil.ANTIALIAS) 

    logging.debug('resized image to %s %s' % im.size) 
    im.save(image.path) 

else: 
    # no action, due to no image or no image in path 
    pass 

return image 

Answer 8

यहां मेरे समाधान,

एक = पहलू sw = मूल छवि चौड़ाई श = मूल छवि ऊंचाई DW = अनुरोध किया अधिकतम चौड़ाई dh है = अनुरोध किया अधिकतम ऊंचाई

sw और श अंतिम आकार वाले मान होंगे

कोड PHP है:

$a = $sw/$sh; 

if($a > 1){ 
    // wider image 
    if($sw != $dw){ 
     $rt = $dw/$sw; 
     $sw = $sw * $rt; 
     $sh = $sh * $rt; 
    } 

    if($sh > $dh){ 
     $rt = $dh/$sh; 
     $sw = $sw * $rt; 
     $sh = $sh * $rt; 
    } 
}else{ 
    // taller image 
    if($sh != $dh){ 
     $rt = $dh/$sh; 
     $sh = $sh * $rt; 
     $sw = $sw * $rt; 
    } 

    if($sw > $dw){ 
     $rt = $dw/$sw; 
     $sh = $sh * $rt; 
     $sw = $sw * $rt; 
    } 
} 

Answer 9

मैं FHD रास्ता

if (width >= height) { 
    var original_ratio = width/height 
    new_width = 1080 * original_ratio 
    console.log("new new_width = " + Math.round(new_width)); 
    console.log("new new_height = 1080"); 
} else { 
    var original_ratio = height/width 
    new_height = 1080 * original_ratio 
    console.log("new new_height = " + Math.round(new_height)); 
    console.log("new new_width = 1080"); 
} 

करने के लिए छवि का आकार बदलने के आप नए आकार 1080 को बदल सकते हैं इस तरह से इस्तेमाल किया।

मुझे आशा है कि यह कम से कम किसी के लिए उपयोगी होगा।

Answer 10

मेरे समाधान हटना और https://stackoverflow.com/a/5654847/1055015

var scale = function (srcWidth, srcHeight, maxWidth, maxHeight) { 

     let resizeWidth = srcWidth; 
     let resizeHeight = srcHeight; 

     let aspect = resizeWidth/resizeHeight; 
     let scaleX = maxWidth/srcWidth; 
     let scaleY = maxHeight/srcHeight; 
     let scale = Math.min(scaleX, scaleY); 

     resizeWidth *= scale; 
     resizeHeight *= scale; 

     if (resizeWidth > maxWidth) { 
     resizeWidth = maxWidth; 
     resizeHeight = resizeWidth/aspect; 
     } 

     if (resizeHeight > maxHeight) { 
     aspect  = resizeWidth/resizeHeight; 
     resizeHeight = maxHeight; 
     resizeWidth = resizeHeight * aspect; 
     } 

     return { 
     width : resizeWidth, 
     height: resizeHeight, 
     }; 
    }