Node.js使用gm拼裝sprite圖片

從設計圖切圖得到了12個小圖標,是按鈕的兩種狀態,然后我就尋思著把他們拼成一張sprite圖片.

之前用過gulp的sprite插件,但這次我不想搞的太隆重.拼圖我知道有個很好用的命令行工具 GraphicsMagick 及配套的nodejs包gm

首先說下我要拼的圖片,我打算將正常狀態作為第1行,激活狀態作為第2行.這樣可以少計算一些background-position.

折騰過程比較痛苦,本來我打算看一下GraphicsMagick與gm的官方文檔,結果好多生單詞,最后還是放棄了.下面說答案吧:

總的來說有兩種方法,

1.使用gm包的append+adjoin方法

這個方法有缺點,就是不能方便的排序成我想要的這種布局.用adjoin我實際上拼了3次圖,才最終得到sprite.參考代碼如下:

gm('nav1_1.png')
 .append('nav2_1.png','nav3_1.png','nav4_1.png','nav5_1.png','nav6_1.png', true)
 .adjoin().write('./result.png', function(err) {
   console.log(err);
 });
 gm('nav1_0.png')
 .append('nav2_0.png','nav3_0.png','nav4_0.png','nav5_0.png','nav6_0.png', true)
 .adjoin().write('./result1.png', function(err) {
   console.log(err);
 });
 
 gm('result1.png').append('result.png').adjoin()
   .write('nav-icons.png', (err, data) => {
     if(err) console.error(err);
     console.log(data);
   })

代碼很初級.

2.使用GraphicsMagick自帶的命令行工具

是直接使用GraphicsMagick的命令行(安裝后,即可在命令行里使用gm命令),但這里要注意:powershell中使用gm一直報錯,需要用cmd并cd到對應目錄.win10自作聰明的用powershell默認代替cmd,結果連這種錯誤都沒修復…

gm montage nav*_0.png nav*_1.png -tile 6x2 -geometry +0+0 rrr.png

可以看到我使用了 montage 方法,且分兩次傳入了圖片(圖片路徑還支持glob表達式), 分兩次傳入圖片路徑可以保證先后順序(因為我就是想拼兩行啊).

簡單講一下montage,其中文表述即”蒙太奇”,高大上,但我們這里只用來拼圖. 命令之后就是圖片路徑; 路徑之后有個 `-tile` 參數, 用來指定圖片的排列方式.6×2就是6列2行.這里有個技巧,如果你想讓所有圖片排成一行,可以這樣 `-tile x1`,即不管列數,只限制為1行,反之, `-tile 1x`則表示只要1列不管有多少行.

-tile參數后是-geometry參數. 其默認值是'120×120>+4+3′,表示”每張小圖的最大尺寸是120×120,大于此尺寸的會被縮放(小于的不會放大),圖片之間的間隔是橫向4縱向3″.

-geometry的參數是按需傳的,比如我傳的只是+0+0,表示不限制每張圖的大小,圖片間距為0.

最后一個參數,就是輸出拼圖結果到rrr.png了.

搞懂這些參數后, 下面的由本方法衍生出來的方法就好理解了.

3.使用gm包執行GraphicsMagick命令行

gm包本身十分強大,但它也提供了生成命令并執行的接口.如上面的命令行, 用gm包可以這么寫:

gm().command('montage')
   .in('nav*_0.png')
   // 圖片路徑分開 in, 不要連在一個 in 里面
   .in('nav*_1.png')
   .in('-tile', '6x2')
   .in('-geometry', '+0+0')
   .write('rrrr.png', (err, a,b,c) => {
     console.log(err, 'a:', a, 'b:', b, 'c:', c);
   });

與直接使用命令行是一樣的效果.但這樣寫成js文件后,下次要用或要發給別人用都更方便了.