說(shuō)到Nodejs下的圖片處理可能第一想到就是gm，gm底層可以是GraphicsMagic（其實(shí)也是gm的由來(lái)），也可以是ImageMagick（其實(shí)GraphicsMagic本身也是從ImageMagic分割而來(lái)，現(xiàn)在獨(dú)立了）。雖然這兩個(gè)工具本身都不是js實(shí)現(xiàn)，所以需要額外安裝，不過(guò)此工具非常常見(jiàn)，可能已經(jīng)預(yù)裝在linux系統(tǒng)下，而且安裝也很方便，所以不用因?yàn)榭吹绞恰暗谌健本头艞?。雖然說(shuō)這兩個(gè)軟件都只是底層，無(wú)需關(guān)心，可筆者在實(shí)踐中發(fā)現(xiàn)必須得用GraphicsMagic，所以這里就只介紹GraphicsMagics的安裝與使用。

GaphicsMagic 安裝

GraphicsMagic 官網(wǎng)是： http://www.graphicsmagick.org/

官網(wǎng)和網(wǎng)上大多數(shù)教程都是教如何編譯，可個(gè)人覺(jué)得可以直接通過(guò)軟件庫(kù)安裝，比如

apt-get install graphicsmagic

如果要學(xué)習(xí)用命令行的方式使用GraphicsMagic可以看這里：http://chabaoo.cn/LINUXjishu/120332.html

Nodejs下的gm安裝

gm是一個(gè)node庫(kù)，所以可用npm安裝

npm install gm

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

圓形剪裁原理

gm是對(duì)GraphicsMagic的封裝，所以理論上GraphicsMagic有的功能都能通過(guò)gm以接口的形式實(shí)現(xiàn)。gm本身不支持圓形剪裁（至少筆者不知如何實(shí)現(xiàn)），同樣意味著其底層也不直接支持。

gm比較常用的功能是：縮放、方形裁剪、格式轉(zhuǎn)換。

所以本教程的圓形裁剪的核心是 借助SVG ，通過(guò)svg構(gòu)建一個(gè)圓形的圖片，然后通過(guò)gm轉(zhuǎn)化為png，即利用svg變換圖片格式。

SVG是可以實(shí)現(xiàn)圓形圖片的裁剪的，網(wǎng)上查到有兩種方式實(shí)現(xiàn)圓形裁剪

1、通過(guò)clip-path

定義一個(gè)圓形的路徑，然后在圖片的style中設(shè)置clip-path，也就是通過(guò)這個(gè)這樣實(shí)現(xiàn)圖片裁剪，理論上是真正意義上的“裁剪”

<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可以看這個(gè)教程

可是這樣的配置在瀏覽器上看沒(méi)有絲毫問(wèn)題，但是發(fā)現(xiàn)通過(guò)gm轉(zhuǎn)化為png后，style沒(méi)有任何效果，還是方形的。

2、通過(guò)circle標(biāo)簽

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

先定義一個(gè)圖案，也就是原來(lái)的圖片，然后創(chuàng)建個(gè)圓形，并用剛剛定義的圖案填充在這個(gè)圓形里面即可。

合成圖片原理

懂的上述剪裁的原理，合成就變得簡(jiǎn)單了。直接把想要合成的圖片以svg的方式拼湊在一起即可。雖然gm本身支持圖片合成，使用compose或者mosaic （詳見(jiàn)這個(gè) 教程 ）不過(guò)感覺(jué)不如svg更加明了。

注意筆者嘗試通過(guò)svg加上文字，不過(guò)發(fā)現(xiàn)中文字無(wú)法被識(shí)別，所以仍然只能通過(guò)gm添加，添加時(shí)需要設(shè)置字體（詳見(jiàn)下一章代碼實(shí)現(xiàn)）

如果要在一個(gè)大圖里嵌入兩張圓形的圖片，則需要設(shè)置兩個(gè)pattern，這時(shí)有個(gè)經(jīng)驗(yàn)：

1. pattern的x和y設(shè)置為0，0
2. pattern的width和height設(shè)置的和 畫(huà)布 一樣
3. image的x，y設(shè)置為其 “實(shí)際位置” ，也就是對(duì)應(yīng) circle 的 cx-r 以及 cy-r ，剪 r 是因?yàn)閏x和cy指的是圓形中心，而x,y是圖形的左上角位置。

代碼實(shí)現(xiàn)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論