Utilisez le recadrage GM pour synthétiser des images sous Nodejs

Cet article présente principalement l'exemple d'utilisation du recadrage circulaire et de la composition d'images gm sous Nodejs. Maintenant, je le partage avec vous et vous donne une référence.

Quand il s'agit de traitement d'image 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 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. Cependant, 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 de donner. 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.

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

Si vous souhaitez apprendre à utiliser GraphicsMagic depuis la ligne de commande, vous pouvez voir ici : http:/ /www.jb51.net/LINUXjishu/120332. html

installation de gm sous Nodejs

gm est une bibliothèque de nœuds, vous pouvez donc l'installer avec npm

npm install gm

Documentation officielle : http://aheckmann.github.io/gm/

Principe du découpage circulaire

gm est une encapsulation de GraphicsMagic, donc en théorie, toutes les fonctions de GraphicsMagic peuvent être interfacées via gm réalisé sous la forme. 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.

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 de cette façon, l'image est recadrée. En théorie, il s'agit d'un véritable "recadrage"

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

Si vous utilisez le chemin du clip, vous pouvez voir ce tutoriel

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

2. Utilisez la balise cercle

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

pour définir d'abord un motif, qui est l'image originale, puis créez un cercle et remplissez-le 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.

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, ils ne peuvent donc être ajoutés que 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 :

1. <🎜. >Réglez le x et le y du motif sur 0. 0

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

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

const gm = require('gm')
const fs = require('fs')
let templateSVG = "/path/to/original.svg"
let outputSVG = "/path/to/repalced.svg"
let input = "/path/to/icon.png"
let font = "/path/to/font.ttf"
let fontColor = "white"
let fontSize = 10

fs.readFile(templateSVG,'utf-8',function(err,data){
  if (err) throw err
  var d = data.replace('{{icon_img}}',input)
  fs.writeFile(outputSVG,d,function(err){
    if (err) throw err
    gm(outputSVG)
    .font(font)
    .fill(fontColor)
    .fontSize(fontSize)
    .drawText(textPosition[0], textPosition[1], text)//
    .write(output,function(err){
      if(err) cb(err)
      // next
    })
  })
})

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter des méthodes globales personnalisées dans vue

Comment implémenter l'enregistrement global et l'enregistrement local dans les composants vue

Comment modifier le nom du projet via le projet vue-cli+webpack

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!