Problème mathématique difficile lors du redimensionnement d'images

Question

J'ai une image que je veux voir en filigrane dans la partie inférieure droite d'autres images. Les dimensions de l'image du filigrane sont 179 largeur, 39 hauteur.

Maintenant, que faire si j'ai une autre image dont les dimensions sont 150 largeur, 20 hauteur? Si nous essayions de le marquer en utilisant l'image originale, il serait évidemment trop grand et l'image elle-même serait complètement masquée par l'image du filigrane, n'est-ce pas? Comment puis-je déterminer une largeur et une hauteur plus petites auxquelles je redimensionnerai l'image du filigrane, quelque chose de beaucoup moins que 150 largeur, 20 hauteur, de sorte qu'il apparaîtra toujours comme un filigrane et ne masquera pas complètement l'image?

Answer 1

Vous devez sélectionner un pourcentage maximal de la hauteur et de la largeur de l'image la plus petite que vous pouvez autoriser pour le filigrane, puis redimensionner l'image du filigrane sur la plus petite de ces deux valeurs maximales. Vos résultats varieront selon que l'image cible est plus grande que large ou vice versa. Par exemple, si vous souhaitez que le filigrane ne dépasse pas 25% de la hauteur et pas plus de 50% de la largeur de l'image cible, vous pouvez voir la taille du filigrane si vous l'avez mis à l'échelle. chaque dimension.

Une échelle à 50% de la largeur signifierait que le filigrane serait de 75 x 16 pixels, ce qui est trop élevé (sur la base des pourcentages arbitrairement sélectionnés).

(75/179) * 39 = 16

mise à l'échelle à 25% de la hauteur signifierait un filigrane de 22 x 5.

(5/39) * 150 = 19

Si les dimensions finissent par être plus grandes que le filigrane d'origine, c'est à vous d'ajuster ou non le filigrane jusqu'à. La qualité d'image se dégrade beaucoup plus rapidement en augmentant la taille d'une image, par rapport à la diminution de sa taille par le même facteur.

Answer 2

Je mettrais probablement le filigrane à l'échelle de 20% de l'image en cours de filigrane, ou 179x39, la plus petite des deux.

Answer 3

Tout d'abord, je vous recommande de générer un ensemble d'images de filigrane de différentes tailles au lieu de redimensionner à la volée ».

Ci-dessous je l'ai décrit un flux de travail de la façon dont Watermark images dynamiquement sur un site:

Concevoir un bon filigrane

tout d'abord, essayez de concevoir le filigrane avec un fond transparent. Cela réduira considérablement le risque de masquer les parties essentielles de l'image cible. Cela peut être fait en utilisant le gif ou (de préférence) le format d'image png. Assurez-vous simplement que le filigrane transparent fonctionne bien à la fois sur les arrière-plans clairs et sombres.

Tenez également compte de la meilleure façon de concevoir le filigrane qui fonctionne à la fois pour les images de style portrait et paysage et les images avec des rapports d'aspect maladroits. Vous devriez envisager de faire deux versions - une pour les images larges et une pour les grandes images. Pour ce dernier type, vous pouvez faire pivoter le filigrane de 90 degrés ou, si le filigrane est composé de texte, vous pouvez scinder le texte en deux ou plusieurs lignes.

Prérendu le filigrane en plusieurs tailles différentes

Donc, ne pas redimensionner dynamiquement le filigrane, au lieu que je vous recommande de rendre un ensemble d'images en filigrane avec des tailles différentes. Cela ne doit être fait qu'une seule fois et cela améliorera grandement la clarté et/ou la lisibilité du filigrane (en particulier pour les petites images cibles).

Selon la différence de taille des images sur la page Web, vous pouvez avoir besoin d'un nombre de tailles plus ou moins grand. C'est un choix de conception que vous devrez faire, mais je pense que vous pourriez vous en sortir avec seulement deux ou trois tailles différentes.

Appliquer le filigrane

Cela se produira de façon dynamique sur le côté serveur (php dans votre fichier). D'abord, trouvez les dimensions de l'image cible en utilisant la fonction getimagesize. Avec cette information à portée de main, vous devrez décider quelle version du filigrane utiliser en fonction de la taille, du format et de l'orientation. Par exemple.

if ($width > $height) {$useLandscapeWatermark=true;} 
if ($width > 100 && $width < 400) {$watermarkSize=2;} 

etc.

Enfin, pour appliquer le filigrane que je vous recommande de regarder la gd library. C'est une bibliothèque puissante qui peut faire beaucoup de trix, entre autres fusionner deux images. Une alternative est ImageMagic.

Bonne chance!