Wie "smart resize" ein angezeigtes Bild, um die original-Seitenverhältnis

Ich habe eine Anwendung, in der end-Benutzer können die Größe und position der Bilder in einem designer. Da die spec fordert das Bild "gestreckt", um mit der Kontrolle, kann der Benutzer am Ende mit einer ungeschickt gestrecktes Bild.

Zu helfen, die Benutzer mit Bild sizing ich denke an der Umsetzung einer smart-resizer-Funktion, die es erlauben würde, die der Benutzer leicht zu beheben, das Seitenverhältnis des Bildes so, dass es nicht mehr verzerrt angezeigt.

Den schnellen Weg, um dieses Problem zu lösen ist, um tatsächlich geben Ihnen zwei Optionen: 1) Breite Skala von 2) Skala von der Höhe. Der Benutzer wählt die Methode und der Algorithmus passt die Größe des Bildes, indem Sie die original-Seitenverhältnis. Zum Beispiel: Ein Bild angezeigt wird als 200x200 auf den designer, aber das ursprüngliche Bild ist 1024x768 Pixel. Wählt der Benutzer "Smart Größe von Breite" und die neue Größe wird ~200x150, da die original aspect ratio) ~1.333

Ist das OK, aber wie könnte ich den Algorithmus intelligenter und sich nicht die Mühe, dem Benutzer durch Fragen, welche dimension die Neuberechnung sollte auf?

InformationsquelleAutor Paul Sasik | 2010-06-09

24

Wenn ich interpretieren deine Skillung richtig, Sie wollen ein Ergebnis, dass nicht größer ist, als die, die der end-Benutzer angelegt ursprünglich; Sie wollen eine der beiden Dimensionen zu schrumpfen, und die anderen gleich bleiben. In anderen Worten, die neue Größe zu füllen, die designer-Raum in eine Richtung, während die Verkürzung die Größe in der anderen Richtung behalten Sie die original-Seitenverhältnis.
```
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
```
Oft werden Sie das arbeiten mit ganzzahligen Koordinaten, aber die Spaltungen zu produzieren, die Verhältnisse, die oben sein müssen, floating point. Hier ist eine Umstellung der Formel, die mehr integer freundlich. Stellen Sie sicher, dass Ihre ganze zahlen haben den Bereich zu behandeln wird die maximale Breite*Höhe.
```
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
```
Ja, die Skillung muss erweitert werden, um zu definieren, was smart Größenänderung tatsächlich tut. Dieser Algorithmus klingt vernünftig. Ich werde es versuchen.

InformationsquelleAutor Mark Ransom
7

Hier ist eine Lösung, die ich kam mit, wenn man mit diesem problem umzugehen. Stellte sich heraus, ziemlich kurz und eindeutig imo, wollte nur, Sie zu teilen.

Handy "- Formeln": ratio = W /H → W = H * ratio → H = W /ratio
1. Berechnen Sie das Verhältnis.
2. Berechnen Sie die Höhe des Bildes, wenn Sie die Breite der neuen Größe Breite (maximal zulässige Breite).
3. Berechnen Sie die Breite des Bildes, wenn Sie die Höhe, um die neue Größe Höhe (maximal zulässige Höhe).
4. Sehen, welche der beiden Größen überschreibt nicht die max Größe in jeder dimension. Wenn das Verhältnis ist nicht 1 von Ihnen wird immer falsch sein, und man wird immer richtig sein.
In Javascript
```
//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 und newSize ist ein array [0] = width, [1] = height

InformationsquelleAutor Jonathan Azulay
2

Es gibt keine Rechnungslegung für die Menge an Kopier-und Rollenwechsler gibt, eh! Ich wollte auch wissen, dies und alles, was ich sah, waren unendlich viele Beispiele der Skalierung der Breite ODER Höhe.. wer würde wollen, dass die anderen überlaufen?!
- Größe in Breite UND Höhe ohne die Notwendigkeit für eine Schleife
- Nicht über die Bilder, die ursprünglichen Abmessungen
- Mathematik verwendet, funktioniert ich.e Breite/Aspekt für die Höhe und Höhe*Aspekt für die Breite, sodass die Bilder eigentlich richtig skaliert-up und down :/
//////////////
```
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;
}
```
ziemlich gut, abgesehen von, wenn Sie ResizeImage(i,2000,3000)

InformationsquelleAutor Dominic

Nahm den Vorschlag oben gemacht und es scale-up/down innerhalb max Höhe /Breite. Hier der python-code für den es und fügte auch Unterstützung für rotierende Dinge, während in limites:

def _resize(Bild, Maße, rotate= "None"):
"""
Ändert die Größe eines Bildes so nah wie möglich an die angegebenen Dimensionen. Bild ist ein
django Bild-Modell-Bereich.

    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

InformationsquelleAutor Jens Lundstrom

1

Weil Sie möchte, um zu zeigen, wie viel wie möglich das Bild skaliert (das original) in Ihrem Fenster, also der Bereich, in dem designer, würdest du die größeren von entweder der Breite oder der Höhe des original-Bildes, und Skala, die zu 200. Pseudo-code (width, height sind die Abmessungen des original):
```
if (width > height) {
    scaledWidth = 200;
    scaledHeight = (height * 200) /width;
} else {
    scaledHeight = 200;
    scaledWidth = (width * 200) /height;
}
```
Nein. Ich möchte das Bild so nah in der Größe, die der Nutzer angelegt, so viel wie möglich. Am Ende, ein von den Abmessungen würde unverändert bleiben.

InformationsquelleAutor Kevin Le - Khnle
1

Berechnung der neuen Dimensionen für beide Varianten ("Skala " Breite" und "Maßstab Höhe"), dann verwenden Sie die eine, die passt im display.

Alternativ könnte man auch berechnen das das Seitenverhältnis der "bounding box" und vergleichen Sie es gegen das Seitenverhältnis des ursprünglichen Bildes. Je nachdem, welches Seitenverhältnis ist größer, die Höhe oder die Breite skaliert werden muss.

Sie können auch beschränken die Größe Prozess, so dass in allen Fällen "die Skala "Breite" ist fertig. Dann ändern Sie die Größe des Bildes, der Benutzer hat jederzeit zu ändern dessen Breite. Die Höhe wird immer automatisch angepasst werden.

Ich dachte, die entlang dieser Linien aber wie yhou bestimmen, was zu breit oder zu hoch, wenn der Anwender kann beliebig Größe und platzieren Sie das Bild?
Ist es nicht beschränkt auf 200x200? Wo hat die aktuellen smart-size-Funktion erhalten Sie Ihre Grenzen aus?
wir sind immer in der Nähe. Die Grenzen sind implizit durch den Benutzer durch die Manipulation der Bilder, die Größe. Siehe meine Antwort an khnle unten.
Also, wenn der Benutzer in der Größe verändert, das Bild, können Sie nehmen Sie die neue Grenzen erstellt, und testen Sie, welche der beiden resize-Methoden wird für diese Arbeit die Grenzen? (Zusätzlich habe ich bearbeitet, einige mehr Ideen in meiner Antwort..)

InformationsquelleAutor sth

Meine Lösung zu schrumpfen und wachsen-Größe in javascript basiert auf 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,
      };
    }

InformationsquelleAutor Exlord

0

Brauchen Sie nur, um die Waage benötigt für beide Dimensionen und nehmen Sie dann die kleinere der 2.

InformationsquelleAutor Matt Warren

hier ist meine Lösung,

a = Aspekt
sw = original-Breite des Bildes
sh = original-Höhe des Bildes
dw = ersuchte max Breite
dh = ersuchte max Höhe

sw und sh enthalten die endgültigen Werte geändert

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

InformationsquelleAutor Christopher Thomas

Ich benutzte diesen Weg, um die Größe des Bildes zu FHD Weise

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