Verwenden Sie GM-Zuschneiden, um Bilder unter Nodejs zu synthetisieren

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung von gm-zirkulärem Zuschneiden und Zusammenstellen von Bildern unter Nodejs vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

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 selbst) sein 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.

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

Wenn Sie lernen möchten, GraphicsMagic über die Befehlszeile zu verwenden, können Sie hier lesen: http://www .jb51.net/LINUXjishu/120332.html

gm-Installation unter Nodejs

gm ist eine Knotenbibliothek, daher kann sie mit npm installiert werden

npm install gm

Offizielle Dokumentation: http://aheckmann.github.

Prinzip des zirkulären Clippings

gm ist eine Kapselung von GraphicsMagic, also theoretisch Alle Funktionen von GraphicsMagic können über gm in Form von Schnittstellen implementiert werden. 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.

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 das Bild zugeschnitten, im wahrsten Sinne des Wortes. Sie können dieses Tutorial sehen

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

2. Verwenden Sie 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>

, um zunächst ein Muster zu definieren, das das Originalbild darstellt, erstellen Sie dann einen Kreis und füllen Sie ihn mit dem gerade definierten Muster.

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)

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

1. Die Breite und Höhe des Musters werden auf die gleichen Werte wie die der Leinwand eingestellt

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

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie benutzerdefinierte globale Methoden in Vue

So implementieren Sie die globale Registrierung und die lokale Registrierung in Vue-Komponenten

So ändern Sie den Projektnamen über das Vue-Cli+Webpack-Projekt

Das obige ist der detaillierte Inhalt vonVerwenden Sie GM-Zuschneiden, um Bilder unter Nodejs zu synthetisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!