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

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

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

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!