Algorithme pour redimensionner l'image et maintenir les proportions pour s'adapter à l'iPhone

Je suis de la création d'un service web pour une application iPhone pour interagir avec.

Quand mon client télécharge les images côté serveur, je veux que mon script php pour redimensionner l'image, tout en maintenant le ratio d'aspectde sorte qu'il s'adapte sur l'écran de l'iPhone. (c'est à dire le côté le plus long est <= 960 et la plus courte <= 640

J'ai créé une maquette en JS, tout simplement parce que je trouve ça plus facile de le faire rapidement.

Je suis sûr que, si je l'ai peut-être tort, que ce n'est pas le moyen le plus efficace de le faire. Quelqu'un pourrait-il me corriger avec le meilleur de la logique (surtout le peu au début), ou d'une manière mathématique de cette approche?

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

source d'informationauteur Alex Coplan

  1. 24

    Je pense que la suite devrait vous donner l'idée. Ce n'est pas une langue, mais plutôt un C-comme le 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.
}

    L'efficacité de ce code, ou ce que vous avez, ne sera pas un problème. Le temps qu'il faut pour redimensionner l'image nain le temps qu'il faut pour faire un couple de comparaisons, les deux se divise, et les deux se multiplie.

    Est-ce un "plus mathématique" façon de le faire? Je suppose que, en ce qu'elle s'effondre votre cas sur quatre en deux. Mais l'approche est essentiellement la même.

  2. 41

    Peut-être un peu plus courte routine serait:

    //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;

    Évidemment, si le ratio est > 1, alors il est d'élargir, si < 1 alors elle régresse.

  3. 7

    Ci-dessous, la façon la plus simple que je connais pour garder les proportions. Espérons que cela aide.

    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);
  4. 3

    Un venir à cette page de Google à la recherche de ASPECT REMPLIR pas ASPECT AJUSTEMENTc'est simplement une question de commutation le ratio de sélection de code que j'ai.e:

    De Jim réponse:

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

    devient

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

    DevProd réponse:

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

    devient

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

    Similaire à DevProd réponse, mais j'ai du mal à suivre moi-même en raison de la convention d'affectation de noms. J'espère que c'est un peu plus clair:

    Comment puis-je meilleur ajustement de certains médias (une photo) à l'intérieur d'un conteneur?

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