Verwenden Sie gm kreisförmiges Zuschneiden und Bildsynthese unter Nodejs

Wenn es um die Bildverarbeitung unter Nodejs geht, fällt mir als Erstes gm ein. Die unterste Ebene von gm kann GraphicsMagic (eigentlich der Ursprung von gm) oder ImageMagick (eigentlich GraphicsMagic) sein selbst wurde ebenfalls von ImageMagic abgespalten und ist nun unabhängig). Obwohl es sich bei diesen beiden Tools selbst nicht um js-Implementierungen handelt, ist eine zusätzliche Installation erforderlich. Dieses Tool ist jedoch sehr verbreitet und wurde möglicherweise im Linux-System vorinstalliert, und die Installation ist auch sehr praktisch, sodass keine Angabe erforderlich ist nur weil es sich um einen „Dritten“ handelt. Obwohl diese beiden Softwareprogramme nur die unterste Ebene darstellen und nicht besorgniserregend sind, stellte der Autor in der Praxis fest, dass GraphicsMagic verwendet werden muss, sodass ich hier nur die Installation und Verwendung von GraphicsMagics vorstelle. Dieser Artikel stellt Ihnen hauptsächlich das Beispiel der Verwendung von gm-zirkulärem Zuschneiden und Zusammenstellen von Bildern unter Nodejs vor. Ich hoffe, es kann Ihnen helfen.

GaphicsMagic-Installation

Die offizielle Website von GraphicsMagic ist: http://www.graphicsmagick.org/

Die meisten Tutorials finden Sie auf der offiziellen Website und online wie man kompiliert, aber ich persönlich denke, dass es direkt über die Softwarebibliothek installiert werden kann, wie zum Beispiel

apt-get install graphicsmagic

gm-Installation unter Nodejs

gm ist eine Knotenbibliothek, sodass Sie sie mit dem npm-Circular-Clipping-Prinzip installieren können

gm ist eine Kapselung von GraphicsMagic, sodass theoretisch alle Funktionen von GraphicsMagic in der Form implementiert werden können von Schnittstellen durch gm. GM selbst unterstützt kein zirkuläres Clipping (zumindest weiß ich nicht, wie man das erreicht), was auch bedeutet, dass die darunter liegende Ebene es nicht direkt unterstützt.

npm install gm

Die am häufigsten verwendeten Funktionen von GM sind: Skalierung, quadratisches Zuschneiden und Formatkonvertierung.

Der Kern des kreisförmigen Zuschneidens in diesem Tutorial besteht also darin, SVG zu verwenden, um ein kreisförmiges Bild über SVG zu erstellen und es dann über GM in PNG zu konvertieren, d. h. SVG zum Transformieren des Bildformats zu verwenden.

SVG kann das Zuschneiden von kreisförmigen Bildern realisieren. Es gibt zwei Möglichkeiten, das kreisförmige Zuschneiden im Internet zu realisieren:

1. Definieren Sie einen Kreis über den Clip-Pfad Stellen Sie dann den Clip-Pfad im Stil des Bildes ein, d. h. auf diese Weise wird ein Bildzuschnitt erreicht

Wenn Sie Clip-Path verwenden, können Sie sich dieses Tutorial ansehen

Diese Konfiguration im Browser stellt jedoch kein Problem dar, aber ich habe festgestellt, dass der Stil nach der Konvertierung in PNG über GM keine Wirkung hat und ist immer noch quadratisch.

2. Über das Kreis-Tag

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

Definieren Sie zunächst ein Muster, das das Originalbild darstellt, erstellen Sie dann einen Kreis und verwenden Sie ihn Füllen Sie einfach den Kreis mit dem Muster, das Sie gerade definiert haben.

Grundsätze zum Zusammenstellen von Bildern

Wenn Sie die oben genannten Zuschneideprinzipien verstehen, wird das Zusammenstellen einfacher. Legen Sie einfach die Bilder, die Sie kombinieren möchten, im SVG-Format zusammen. Obwohl GM selbst die Bildsynthese mit Compose oder Mosaik unterstützt (Einzelheiten finden Sie in diesem Tutorial), fühlt es sich nicht so klar an wie SVG.

Beachten Sie, dass der Autor versucht hat, Text über SVG hinzuzufügen, aber festgestellt hat, dass chinesische Zeichen nicht erkannt werden konnten, sodass er dennoch über GM hinzugefügt werden kann. Beim Hinzufügen müssen Sie die Schriftart festlegen (siehe nächstes Kapitel). für Details zur Code-Implementierung)

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

Wenn Sie zwei kreisförmige Bilder in ein großes Bild einbetten möchten, müssen Sie zwei Muster festlegen:

Setzen Sie x und y des Musters auf 0. 0

Die Breite und Höhe des Musters werden auf die gleiche Weise wie die Leinwand eingestellt

Die x- und y-Werte des Bildes werden auf ihre „tatsächliche Position“ eingestellt, d sind die Positionen der oberen linken Ecke der Figur.

1. Code-Implementierung

Das obige ist der detaillierte Inhalt vonVerwenden Sie gm kreisförmiges Zuschneiden und Bildsynthese unter Nodejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!