Comment "redimensionner intelligemment" une image affichée au format d'origine

Voici une solution je suis venu avec quand avoir à faire face à ce problème. S'est avéré assez court et simple de l'omi, je voulais juste le partager.

À portée de main "formules": ratio = W /H → W = H * ratio → H = W /ratio

1. Calculer le ratio.
2. Calculer la hauteur de l'image si vous définissez la largeur de la nouvelle taille de la largeur (maximum autorisé de largeur).
3. Calculer la largeur de l'image si vous réglez la hauteur de la nouvelle taille de hauteur (hauteur maximale autorisée).
4. Voir qui des deux tailles ne remplace pas la taille maximale dans n'importe quelle dimension. Si le rapport n'est pas 1 l'un d'entre eux sera toujours mal et l'on sera toujours correct.

En 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 et newSize est un tableau [0] = width[1] = height

A pris la suggestion ci-dessus et mis à l'échelle vers le haut/vers le bas à l'intérieur de max hauteur /largeur. Voici le code python pour elle et également ajouté le support pour la rotation des choses tout en gardant à l'intérieur de limites:

def _resize(image, les dimensions, rotate=None):
"""
Redimensionne une image aussi proche que possible aux dimensions indiquées. L'Image est un
django image-modèle-champ.

    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

Calculer les nouvelles dimensions pour les deux variantes ("échelle par la largeur" et "l'échelle en hauteur"), puis utilisez l'une qui s'adapte à l'écran.

Sinon vous pouvez aussi calculer le ratio d'aspect de la "zone de délimitation" et la comparaison avec le ratio d'aspect de l'image d'origine. Selon le rapport d'aspect est plus grand, la hauteur ou la largeur doit être mis à l'échelle.

Vous pouvez aussi restreindre le processus de redimensionnement, de sorte que dans tous les cas, "l'échelle de largeur" est fait. Ensuite, pour modifier la taille de l'image, l'utilisateur dispose toujours de changer sa largeur. La hauteur sera toujours réglée automatiquement.

voici ma solution,

a = aspect
sw = largeur de l'image d'origine
sh = hauteur de l'image d'origine
dw = a demandé largeur max
dh = a demandé hauteur max

sw et le poisson contiennent de la finale redimensionnée valeurs

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

Ma solution pour réduire et agrandir la taille en javascript basé sur 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,
      };
    }