nodejs圖片處理工具gm用法小結

這篇文章主要介紹了nodejs圖片處理工具gm用法小結,詳細的介紹了gm的使用,還有圖片處理的實例,非常具有實用價值,需要的朋友們下面隨着小編來一起學習學習吧

在做H5應用中,有時候會涉及到一些圖片加工處理的操作,nodejs有一個很好的後臺圖片處理module,就是這裏說的gm。gm有官方文檔,但感覺寫得太抽象,反而看不懂了。這裏把一些常見的用法寫下,供大家參考。

安裝   

首先要安裝 GraphicsMagick或者ImageMagick,然後

npm install --save gm

GraphicsMagick和ImageMagick的區別

GraphicsMagick是從ImageMagick中分離出來的,推薦下載ImageMagick

加載GraphicsMagick(大小4.72 MB)

var gm = require('gm')

加載ImageMagick(大小23.8 MB)

var gm = require('gm').subClass({imageMagick: true})// 注意使用的區別

除了加載有區別,其他使用方式完全一樣

用法說明

圖片尺寸

gm('img.png')
.size(function (err, size) {
 if (!err)
  console.log(size.width > size.height ? 'wider' : 'taller than you');
});

圖片伸縮

可以只依據寬、高或者同時將寬高都放縮。

gm("img.png").resize(width)//保持寬高比
gm("img.png").resize(null, height)//保持寬高比
gm("img.png").resize(width, height, '!')//參數'!'用於忽略寬高比

圖片旋轉

將圖片旋轉degrees,背景填充color。

gm("img.png").rotate(color, degrees)
gm("img.png").rotate('green', 45)

圖片裁剪

從圖片的(x, y)位置開始,裁剪出一個寬爲width,高爲height的圖片來。

gm("img.png").crop(width, height, x, y)

圖片拼接(mosaic)

gm()
 .in('-page', '+0+0')
 .in('bg.jpg')
 .in('-page', '+10+20') // location of smallIcon.jpg is x,y -> 10, 20
 .in('smallIcon.jpg')
 .mosaic()
 .write('tesOutput.jpg', function (err) {
  if (err) console.log(err);
 });

圖片合成(compose)

gm()
.command("composite") 
.in("-gravity", "center")
.in(change_image_url)
.in(base_image_url)
.write( output_file, function (err) {
 if (!err) 
  console.log(' hooray! ');
 else
  console.log(err);
});

不太清楚圖片拼接(mosaic)與合成(compose)有什麼區別,gm提供了兩條命令,對於簡單的圖片合成,好像都可以使用。

圖片拼接(append)

gm中使用append也可以實現圖片的拼接,與mosaic、compose不同的是,這裏的拼接應該是不能覆蓋的。缺省參數ltr表示拼接方向,布爾變量,true表示從左到右,false表示從上到下,默認false。

gm("img.png").append(img [, img, ltr])
gm("img.png").append("another.jpg", "third.gif")//從上到下拼接
gm("img.png").append("another.jpg", "third.gif", true)//從左到右拼接

圖片註釋

在圖片的(x, y)位置繪製文字。

gm("img.png").drawText(10, 50, "from scratch")

創建圖片

gm(200, 400, "#ddff99f3")
.drawText(10, 50, "from scratch")
.write("/path/to/brandNewImg.jpg", function (err) {
 // ...
});

總結

gm具有強大的圖片處理功能,nodejs還是藉助於gm工具來實現的圖片處理,對於需要後臺處理圖片的情形,這個是挺有用的。

gm提供的各個函數其實可以複合使用,就是說,先讀取(gm)圖片後,可以先進行拼接(mosaic, compose, append),然後裁剪(crop),放縮(resize)到指定大小後,最後才保存(write)下來。

gm的官方文檔感覺過於簡陋,網上的關於nodejs gm用法的資料也不多,本文將一些基本的用法總結下來,學到到新的持續更新。

另外,歡迎大家總結nodejs gm資料!

附gm參考資料

node gm github

nodejs gm官方文檔

stackoverflow : How to do composite with gm node.js?

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章