本篇文章主要介紹了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安裝
官方文件：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，這時有個經驗：
pattern的x和y設定為0， 0
pattern的width和height設定的和畫布一樣
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中文網其他相關文章！
