Adapter une image avec recadrage et mise à l’échelle

Cette fonction répond à un problème récurrent : des images de toutes tailles et direction (portrait et paysage) doivent remplir un cadre aux dimensions précises.
Cela signifie qu’il faut réduire l’image (ou l’agrandir au pire) pour que le cadre soit rempli.

Précédent | 13/26 | Suivant

La manière la plus élégante d’ajouter cet algorithme dans un script est d’en faire une fonction. On lui donnerait une image et la taille du cadre, et il renverrait une image de la taille du cadre avec à l’intérieur l’image recadrée.

Une fois identifié le fonctionnement de notre fonction, Il ne reste plus qu’à coder ça.

Deux cas de figure

Le script crée une image avec PGraphics à la taille finale de l’image, puis compare le ratio du cadre et de l’image.
Le ratio est ici le rapport entre la largeur et la hauteur de l’image. Pour une image de 400 sur 200 pixels, ce sera 400/200, soit 2. L’image, pour le dire différemment, est deux fois plus large que haute.

Comparer le ratio du cadre et de l’image va permettre de distinguer deux cas de figure : soit le cadre (l’image recadrée) est plus large que l’image donnée, soit le cadre est plus large que l’image donnée.

Si le cadre est plus étroit que l’image, la hauteur de l’image sera adaptée à la hauteur du cadre, et la largeur calculée en proportion. L’image sera ensuite centrée horizontalement dans le cadre

Si le cadre est plus large que l’image, la largeur de l’image sera adaptée à la largeur du cadre, et l’image ensuite centrée verticalement dans le cadre.

Comparer le ratio du cadre et de l’image permet de connaître avec certitude le cas de figure auquel on a affaire, par exemple :
- Un cadre horizontale de 400 X 200 pixels a un ratio de 2.
- Une image verticale de 600 X 1200 pixels a un ratio largeur/hauteur de 0.5.
Le ratio du cadre (2) est supérieur à celui de l’image (0,5). Il faudra donc dans ce cas que la largeur l’image soit réduite à 400 pixels, que la hauteur soit adaptée en proportion, puis centrée dans l’espace vertical.

Il n’y a plus ensuite qu’a renvoyer l’image.

Le code

La fonction s’appelle comme ceci :

 PImage im=loadImage("monimage.jpg");
 PImage macase=cree_case(im,200,400);
 image(macase,0,0);

Et voici la fonction elle-même :

PImage cree_case(PImage lim, int largeur, int hauteur){
 // creer une image au format définitif
 PGraphics pg=createGraphics(largeur,hauteur);
 
 // Calculer le ratio largeur/hauteur du cadre et de l'image
 float ratio_cadre=(largeur*1.0)/(hauteur*1.0);
 float ratio_image=(lim.width*1.0)/(lim.height*1.0);
 println(ratio_cadre+" "+ratio_image);
 
 pg.beginDraw();
 pg.background(255);
 if(ratio_cadre < ratio_image){ //cadre plus étroit que l'image
   println("cadre plus étroit que l'image");
   float nl=lim.width*ratio_cadre;
   float px=(nl-largeur)/2;
   pg.image(lim,-px,0,nl,hauteur);
 } else {
   println("cadre plus large que l'image");
   float nh=lim.height/ratio_cadre;
   float py=(nh-hauteur)/2;
   pg.image(lim,0,-py,largeur,nh);
 }
 pg.noFill();
 pg.stroke(0);
 pg.strokeWeight(1);
 pg.rect(0,0,largeur,hauteur);
 
 pg.endDraw();
 return pg;
}