Algorithmus, um die Größe Bild und das Seitenverhältnis beizubehalten, passen iPhone

Ich bin erstellen einer web-service für ein iPhone app zu interagieren.

Wenn mein client uploads images server-Seite, ich möchte mein php-Skript zum ändern der Bildgröße, unter Beibehaltung des Seitenverhältnisses, so dass es passt auf dem iPhone-Bildschirm. (also die längste Seite ist <= 960 und die kürzeste <= 640

Habe ich ein mock-up in JS, einfach, weil ich finde es einfacher zu tun schnell.

Ich bin mir ziemlich sicher, obwohl ich falsch sein kann, dass dies nicht der effizienteste Weg, es zu tun. Könnte jemand korrigieren Sie mich, mit entweder bessere Logik (besonders das Stück am start), oder eine mathematische Möglichkeit, dies zu erreichen?

var w = 960, h = 960, new_w, new_h;
if (w >= h && w > 960 || h >= w && h > 960 || w >= h && h > 640 || h >= w && w > 640) {
    if (w > h) {
        if (w>960) {
            new_w = 960;
            new_h = h*(new_w/w);
        }
        if (h>640) {
            new_h = 640;
            new_w = w*(new_h/h);
        }
    }
    else {
        if (h>960) {
            new_h = 960;
            new_w = w*(new_h/h);
        }
        if (w>640) {
            new_w = 640;
            new_h = h*(new_w/w);
        }
    }
}
Das einzige problem dort ist Sie sofort handeln, nachdem Sie überprüfen, w>960, und davon ausgehen, dass new_h=h*(new_w/w) <=640, die kann oder kann nicht wahr sein. Sie müssen prüfen, Schranken für die beiden ersten.

InformationsquelleAutor Alex Coplan | 2011-10-23

  1. 24

    Ich denke, das folgende sollte Ihnen die Idee. Es ist keine bestimmte Sprache, sondern einer C-ähnlichen pseudo-code.

    shortSideMax = 640;
longSideMax = 960;
function Resize(image)
{
    if (image.width >= image.height)
    {
        if (image.width <= longSideMax && image.height <= shortSideMax)
            return image;  //no resizing required
        wRatio = longSideMax / image.width;
        hRatio = shortSideMax / image.height;
    }
    else
    {
        if (image.height <= longSideMax && image.width <= shortSideMax)
            return image; //no resizing required
        wRatio = shortSideMax / image.width;
        hRatio = longSideMax / image.height;
    }

    //hRatio and wRatio now have the scaling factors for height and width.
    //You want the smallest of the two to ensure that the resulting image
    //fits in the desired frame and maintains the aspect ratio.
    resizeRatio = Min(wRatio, hRatio);

    newHeight = image.Height * resizeRatio;
    newWidth = image.Width * resizeRatio;

    //Now call function to resize original image to [newWidth, newHeight]
    //and return the result.
}

    Die Effizienz dieser code, oder was Sie haben, kein Problem sein. Die Zeit, die es braucht, um tatsächlich die Größe des Bildes wird Zwerg die Zeit, die es braucht, um ein paar Vergleiche, die beiden trennt, und mit zwei multipliziert.

    Ist dies ein "mehr mathematische" Weg, es zu tun? Ich nehme an, dass es zusammenbricht Ihre vier Fällen, in zwei. Aber der Ansatz ist im wesentlichen die gleiche.

    eigentlich denke ich, dein JS-code ist, auch wenn Sie durch Unfall 😛
    Ich hatte ziemlich genau die gleichen Algorithmus, aber es war schön zu sehen, wie jemand, der die Lösung für dieses problem-und Dank für den Hinweis, dass tatsächlich durchführen Größenänderung Aktion auf dem Bild wird der Algorithmus ist Effizienz ein strittiger Punkt.
    dieser algo nicht für mich arbeiten, wenn die Höhe des Bildes ist 800 und Breite ist 600, während shortsidemax ist 275(vertikal) und longsidemax 480(horizontal).
    Sie sollten eine Frage stellen, dann zeigt das, was Sie versucht haben und die Ergebnisse, die Sie bekommen. Werden Sie sicher, dass ein link zu dieser Antwort und erklären, dass es nicht funktioniert.

    InformationsquelleAutor Jim Mischel

  2. 41

    Vielleicht eine etwas kürzere routine wäre:

    //Calculate resize ratios for resizing 
float ratioW = targetWidth / oldWidth; 
float ratioH = targetHeight / oldHeight;

//smaller ratio will ensure that the image fits in the view
float ratio = ratioW < ratioH?ratioW:ratioH;

newWidth = oldWidth*ratio;
newHeight = oldHeight*ratio;

    Natürlich, wenn das Verhältnis > 1 ist, dann ist es vergrößern, wenn < 1 ist, dann ist es zu schrumpfen.

    Ich will nur zu beachten, dass ein Wechsel zwischen Aspekt passen und füllen Aspekt ist wirklich einfach. Für den Aspekt füllen Sie einfach filp der Zeichen: float ratio = ratioW > ratioH ? ratioW : ratioH;

    InformationsquelleAutor DevProd

  3. 7

    Unten, ist der einfachste Weg, ich weiß zu halten Proportionen. Hoffe, es hilft.

    Javascript

    function resize(width, height, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / width, maxHeight / height);
    var newWidth = ratio * width;
    var newHeight = ratio * height;

    console.log(newWidth + ' ' + newHeight); //Test

    //Process resizing...
}

resize(1280, 1024, 600, 300);

    PHP

    function resize($width, $height, $maxWidth, $maxHeight) {
    $ratio = min(array($maxWidth / $width, $maxHeight / $height));
    $newWidth = $ratio * $width;
    $newHeight = $ratio * $height;

    echo $newWidth . ' ' . $newHeight; //Test

    //Process resizing...
}

resize(1600, 1280, 150, 150);

    InformationsquelleAutor Koeta

  4. 3

    Jeder kommt auf diese Seite von Google suchen ASPEKT FÜLLEN nicht ASPEKT PASSEN, es ist einfach eine Sache der Umstellung, die ratio selection code, den ich.e:

    Jim ' s Antwort:

    resizeRatio = Min(wRatio, hRatio); //Aspect Fit

    wird

    resizeRatio = Max(wRatio, hRatio); //Aspect Fill

    DevProd Antwort:

    float ratio = ratioW < ratioH?ratioW:ratioH; //Aspect Fit

    wird

    float ratio = ratioW > ratioH?ratioW:ratioH; //Aspect Fill

    InformationsquelleAutor dloomb

  5. 0

    Ähnlich DevProd Antwort, aber ich kämpfte, um zu Folgen, es mich, weil der Namenskonvention. Dies ist hoffentlich ein wenig klarer:

    Wie kann ich am besten passen einige Medien (ein Foto) in einem container?

    //Define media size and container size
int mediaWidth = 600;
int mediaHeight = 600;
int containerWidth = 1024;
int containerHeight= 768;

//Calculate best fit (whichever dimension has a smaller 'fit')
float wFits   = containerWidth  / mediaWidth;
float hFits   = containerHeight / mediaHeight;
float minFits = wFits > hFits ? hFits : wFits;

//The new size of the media, best-fit'ing inside the container
int width  = (int) (mediaWidth*minFits);
int height = (int) (mediaHeight*minFits);

    InformationsquelleAutor 1owk3y

Schreibe einen Kommentar