在Nodejs下使用gm裁切在合成圖片

本篇文章主要介紹了Nodejs下使用gm圓形裁剪並合成圖片的範例，現在分享給大家，也給大家做個參考。

說到Nodejs下的圖片處理可能第一想到就是gm，gm底層可以是GraphicsMagic（其實也是gm的由來），也可以是ImageMagick（其實GraphicsMagic本身也是從ImageMagic分割而來，現在獨立了）。雖然這兩個工具本身都不是js實現，所以需要額外安裝，不過此工具非常常見，可能已經預先安裝在linux系統下，而且安裝也很方便，所以不用因為看到是「第三方」就放棄。雖然說這兩個軟體都只是底層，不用關心，但實作者在實務上發現必須得用GraphicsMagic，所以這裡就只介紹GraphicsMagics的安裝與使用。

GaphicsMagic 安裝

GraphicsMagic 官網是：http://www.graphicsmagick.org/

官網和網路上大多數教學課程都是教如何編譯，可個人覺得可以直接透過軟體庫安裝，例如

apt-get install graphicsmagic

如果要學習用命令列的方式使用GraphicsMagic可以看這裡：http://www.jb51.net/LINUXjishu/120332.html

Nodejs下的gm安裝

gm是一個node庫，所以可用npm安裝

npm install gm

官方文件：http://aheckmann.github. io/gm/

圓形剪裁原理

gm是對GraphicsMagic的封裝，所以理論上GraphicsMagic有的功能都能透過gm以介面的形式實現。 gm本身不支援圓形剪裁（至少筆者不知如何實現），同樣意味著其底層也不直接支援。

gm比較常用的功能是：縮放、方形裁切、格式轉換。

所以本教學的圓形裁切的核心是 借助SVG ，透過svg建構一個圓形的圖片，然後透過gm轉換為png，也就是利用svg變換圖片格式。

SVG是可以實現圓形圖片的裁剪的，網上查到有兩種方式實現圓形裁剪

1、透過clip-path

定義一個圓形的路徑，然後在圖片的style中設定clip-path，也就是透過這個這樣實現圖片裁剪，理論上是真正意義上的「裁剪」

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

如果用clip-path可以看這個教學

可是這樣的配置在瀏覽器上看沒有絲毫問題，但是發現透過gm轉化為png後，style沒有任何效果，還是方形的。

2、透過circle標籤

<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本身支援圖片合成，使用compose或mosaic （詳見這個 教學 ）不過感覺不如svg更明了。

注意筆者嘗試透過svg加上文字，不過發現中文字無法被識別，所以仍然只能透過gm添加，添加時需要設定字體（詳見下一章程式碼實現）

如果要在一個大圖中嵌入兩張圓形的圖片，則需要設定兩個pattern，這時有個經驗：

1. pattern的x和y設定為0， 0

2. pattern的width和height設定的和畫布一樣

3. image的x，y設定為其「實際位置」 ，也就是對應circle 的cx-r 以及cy-r ，剪r 是因為cx和cy指的是圓形中心，而x,y是圖形的左上角位置。

程式碼實作

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue中如何實作自訂全域方法

在vue元件中如何實作全域註冊和局部註冊

透過vue-cli webpack專案如何實作修改專案名稱

#

以上是在Nodejs下使用gm裁切在合成圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！