gm トリミングを使用して Nodejs で画像を合成する

この記事では主に、Nodejs で gm 円形トリミングと写真の合成を使用する例を紹介します。

Nodejs での画像処理に関して最初に思い浮かぶのは gm です。gm の最下層は GraphicsMagic (実際には gm の起源です) または ImageMagick (実際、GraphicsMagic 自体もImageMagic は現在独立しています）。これら 2 つのツール自体は JS 実装ではないため、追加のインストールが必要ですが、このツールは非常に一般的で、Linux システムにプリインストールされている可能性があり、インストールも非常に便利なので、追加する必要はありません。それが「第三者」であるという理由だけでアップします。この 2 つのソフトウェアは単なる最下層なので気にする必要はありませんが、筆者は実際に GraphicsMagic を使用する必要があることに気づいたので、ここでは GraphicsMagics のインストールと使用方法のみを紹介します。

GaphicsMagic のインストール

GraphicsMagic 公式 Web サイトは次のとおりです: http://www.graphicsmagick.org/

公式 Web サイトとオンラインのほとんどのチュートリアルではコンパイル方法が説明されていますが、個人的にはソフトウェアから直接インストールできると思います。コマンドラインから GraphicsMagic の使用方法を学びたい場合は、http://www.jb51.net/LINUXjishu/120332.html

gm の Nodejs へのインストール

を参照してください。 gm はノードライブラリなので、npm でインストールできます

apt-get install graphicsmagic

公式ドキュメント: http://aheckmann.github.io/gm/

循環クリッピングの原理

gm は GraphicsMagic のカプセル化であるため、理論上、GraphicsMagic のすべての機能は、gm quit を通じてインターフェイスできます。 GM 自体は円形クリッピングをサポートしていません (少なくとも私にはそれを実現する方法がわかりません)。これは、その下層が円形クリッピングを直接サポートしていないことも意味します。

gm のより一般的に使用される機能は、スケーリング、正方形トリミング、フォーマット変換です。

したがって、このチュートリアルの円形トリミングの核心は、SVG を使用して svg を通じて円形画像を構築し、それを gm を通じて png に変換することです。つまり、svg を使用して画像形式を変換します。

SVG は円形の画像のトリミングを実現できます。インターネット上で円形のトリミングを実現する 2 つの方法を見つけました

1. クリップパス

を介して円形のパスを定義し、画像のパスのスタイルにクリップを設定します。理論的には、これによって画像のトリミングが実現されます

npm install gm

clip-pathを使用する場合は、このチュートリアルをご覧ください

しかし、ブラウザではこの設定で問題ありません。しかし、gmを介してpngに変換した後、スタイルは効果がなく、正方形のままであることがわかりました。

2. 円タグ

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

を通じて、最初に元の画像であるパターンを定義し、次に円を作成し、定義したパターンで塗りつぶします。

写真合成の原理

上記のトリミング原理を理解すれば、合成は簡単になります。結合したい写真をsvg形式で配置するだけです。 gm 自体はコンポーズやモザイク (詳細についてはこのチュートリアルを参照) を使用した画像合成をサポートしていますが、svg ほど鮮明ではないように感じます。

作成者は svg を通じてテキストを追加しようとしましたが、中国語の文字が認識できないことが判明したため、追加する際にはフォントを設定する必要があることに注意してください (次の章のコード実装を参照してください)。

大きな画像で使用したい場合 2 つの円形の画像を埋め込むには、次の 2 つのパターンを設定する必要があります:

パターンの x と y は 0、0 に設定されます
1. 。

パターンの幅と高さはキャンバスと同じに設定されます
画像のxとyは「実際の位置」、つまり円に対応するcx-rとcy-rに設定されます。 cx と cy は円の中心を指し、x、y はグラフィックの左上隅の位置を指すため、r がカットされます。
コード実装

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

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

vueでカスタムグローバルメソッドを実装する方法

vueコンポーネントでグローバル登録とローカル登録を実装する方法

vue-cli+webpackプロジェクトを通じてプロジェクト名を変更する方法

以上がgm トリミングを使用して Nodejs で画像を合成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。