首頁 > web前端 > js教程 > 在Nodejs下使用gm裁切在合成圖片

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

亚连
發布: 2018-06-05 15:24:21
原創
2482 人瀏覽過

本篇文章主要介紹了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(&#39;gm&#39;)
const fs = require(&#39;fs&#39;)
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,&#39;utf-8&#39;,function(err,data){
  if (err) throw err
  var d = data.replace(&#39;{{icon_img}}&#39;,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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板