Nodejs で gm 円形トリミングと画像の合成を使用する

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

GaphicsMagic のインストール

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

公式 Web サイトとオンラインのほとんどのチュートリアルではコンパイル方法が説明されていますが、個人的にはソフトウェアから直接インストールできると思います。

などのライブラリ

apt-get install graphicsmagic

gm Nodejsの下にインストール

gmはノードライブラリなので、npmでインストールできます

npm install gm

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

循環クリッピングの原理

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

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

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

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

1. クリップパス

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

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

クリップパスを使用する場合は、このチュートリアルを参照してください

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

2. サークルタグ

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

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

写真合成の原理

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

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

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

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

。

2. パターンの幅と高さはキャンバスと同じに設定されます

3. 画像のxとyは「実際の位置」、つまり円に対応するcx-rとcy-rに設定されます。 cx と cy は円の中心を指し、x、y はグラフィックの左上隅の位置であるため、r がカットされます。

コード実装

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

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