Utiliser le recadrage circulaire GM et la synthèse d'images sous Nodejs

En ce qui concerne le traitement d'images sous Nodejs, la première chose qui vient à l'esprit est gm. La couche inférieure de gm peut être GraphicsMagic (qui est en fait l'origine de gm), ou elle peut être ImageMagick (en fait, GraphicsMagic). lui-même a également été séparé d'ImageMagic et est désormais indépendant). Bien que ces deux outils eux-mêmes ne soient pas des implémentations JS, ils nécessitent donc une installation supplémentaire, mais cet outil est très courant et peut avoir été préinstallé sur le système Linux, et l'installation est également très pratique, il n'est donc pas nécessaire d'abandonner simplement parce qu'il s'agit d'un "tiers". Bien que ces deux logiciels ne soient que la couche inférieure et n'aient pas besoin de s'inquiéter, l'auteur a constaté dans la pratique que GraphicsMagic doit être utilisé, donc ici je ne présente que l'installation et l'utilisation de GraphicsMagics. Cet article vous présente principalement l'exemple d'utilisation du recadrage circulaire et de la composition d'images gm sous Nodejs. J'espère que cela pourra vous aider.

Installation de GaphicsMagic

Le site officiel de GraphicsMagic est : http://www.graphicsmagick.org/

La plupart des tutoriels sur le site officiel et l'enseignement en ligne comment compiler, mais je pense personnellement qu'il peut être installé directement via la bibliothèque de logiciels, comme

apt-get install graphicsmagic

installation de gm sous Nodejs

gm est une bibliothèque de nœuds, vous pouvez donc l'installer avec npm Principe de découpage circulaire

gm est une encapsulation de GraphicsMagic, donc en théorie, toutes les fonctions de GraphicsMagic peuvent être implémentées sous la forme d'interfaces via gm. GM lui-même ne prend pas en charge le découpage circulaire (du moins, je ne sais pas comment y parvenir), ce qui signifie également que sa couche sous-jacente ne le prend pas directement en charge.

npm install gm

Les fonctions les plus couramment utilisées de gm sont : la mise à l'échelle, le recadrage carré et la conversion de format.

Le cœur du recadrage circulaire dans ce didacticiel est donc d'utiliser SVG pour construire une image circulaire via SVG, puis de la convertir en PNG via GM, c'est-à-dire d'utiliser SVG pour transformer le format d'image.

SVG peut réaliser un recadrage d'images circulaires. Il existe deux façons de réaliser un recadrage circulaire trouvées sur Internet

1 : Définir un cercle via le chemin du clip

, et. puis définissez le chemin du clip dans le style de l'image, c'est-à-dire que le recadrage de l'image est obtenu grâce à cela. En théorie, il s'agit d'un véritable "recadrage"

. Si vous utilisez clip-path, vous pouvez regarder ce tutoriel

Cependant, il n'y a aucun problème avec cette configuration dans le navigateur, mais j'ai trouvé qu'après l'avoir converti en png via gm, le style n'a aucun effet et est toujours carré.

2. Grâce à la balise cercle

<svg>
  <defs>
    <clipPathid="clipPath">
      <circlecx="5"cy="5"r="5"/>
    </clipPath>
  </defs>
  <imagestyle="clip-path: url(#clipPath);"href="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/> 
</svg>

Définissez d'abord un motif, qui est l'image originale, puis créez un cercle et utilisez Remplissez simplement le cercle avec le motif que vous venez de définir.

Principes de composition d'images

Si vous comprenez les principes de recadrage mentionnés ci-dessus, la composition deviendra simple. Mettez simplement les images que vous souhaitez combiner au format svg. Bien que gm lui-même prenne en charge la synthèse d'images, en utilisant la composition ou la mosaïque (voir ce tutoriel pour plus de détails), cela ne semble pas aussi clair que svg.

<svg>
  <defs>
    <patternpatternUnits="userSpaceOnUse"id="raduisImage"x="0"y="0"width="10"height="10">
      <imagehref="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/>
    </pattern>
  </defs>
  <circlecx="5"cy="5"r="5"fill="url(#raduisImage)"></circle>
</svg>

Notez que l'auteur a essayé d'ajouter du texte via svg, mais a constaté que les caractères chinois ne pouvaient pas être reconnus, il peut donc toujours être ajouté via gm. Lors de l'ajout, vous devez définir la police (voir le chapitre suivant. pour l'implémentation du code pour plus de détails)

Si vous souhaitez intégrer deux images circulaires dans une grande image, vous devez définir deux modèles :

Réglez le x et le y du motif sur 0. 0

La largeur et la hauteur du motif sont définies de la même manière que la toile

Les x et y de l'image sont réglés à leur "position réelle", c'est-à-dire Correspondant à cx-r et cy-r du cercle, r est coupé car cx et cy font référence au centre du cercle, tandis que x et y sont les positions du coin supérieur gauche de la figure.
Mise en œuvre du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!