欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Node.js使用gm拼裝sprite圖片

 更新時(shí)間:2017年07月04日 08:50:03   作者:十年燈  
這篇文章主要介紹了Node.js使用gm拼裝sprite圖片的相關(guān)資料,需要的朋友可以參考下

從設(shè)計(jì)圖切圖得到了12個(gè)小圖標(biāo),是按鈕的兩種狀態(tài),然后我就尋思著把他們拼成一張sprite圖片.

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

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

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

總的來說有兩種方法,

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

這個(gè)方法有缺點(diǎn),就是不能方便的排序成我想要的這種布局.用adjoin我實(shí)際上拼了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一直報(bào)錯(cuò),需要用cmd并cd到對應(yīng)目錄.win10自作聰明的用powershell默認(rèn)代替cmd,結(jié)果連這種錯(cuò)誤都沒修復(fù)…

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

可以看到我使用了 montage 方法,且分兩次傳入了圖片(圖片路徑還支持glob表達(dá)式), 分兩次傳入圖片路徑可以保證先后順序(因?yàn)槲揖褪窍肫磧尚邪?.

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

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

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

最后一個(gè)參數(shù),就是輸出拼圖結(jié)果到rrr.png了.

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

3.使用gm包執(zhí)行GraphicsMagick命令行

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

gm().command('montage')
   .in('nav*_0.png')
   // 圖片路徑分開 in, 不要連在一個(gè) 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文件后,下次要用或要發(fā)給別人用都更方便了.

相關(guān)文章

  • 使用puppeteer破解極驗(yàn)的滑動驗(yàn)證碼

    使用puppeteer破解極驗(yàn)的滑動驗(yàn)證碼

    這篇文章主要介紹了利用puppeteer破解極驗(yàn)的滑動驗(yàn)證功能,基本流程代碼實(shí)現(xiàn)給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-02-02
  • PHP和NodeJs開發(fā)的應(yīng)用如何共用Session

    PHP和NodeJs開發(fā)的應(yīng)用如何共用Session

    這篇文章主要介紹了PHP和NodeJs開發(fā)的應(yīng)用如何共用Session的相關(guān)資料及思路,需要的朋友可以參考下
    2015-04-04
  • 更新Node.js的四種方法小結(jié)

    更新Node.js的四種方法小結(jié)

    Node.js是一個(gè)開放源代碼的跨平臺JavaScript運(yùn)行環(huán)境,它在不同的平臺上都得到了廣泛使用和支持,強(qiáng)大的生態(tài)系統(tǒng)、持續(xù)的更新和不斷改進(jìn)的性能使得Node.js非常受歡迎,然而,更新Node.js仍然是一個(gè)必要的過程,本文給大家介紹一些有關(guān)如何更新Node.js的方法
    2023-11-11
  • node.js使用Moment.js js 時(shí)間計(jì)算方法示例小結(jié)

    node.js使用Moment.js js 時(shí)間計(jì)算方法示例小結(jié)

    這篇文章主要介紹了node.js使用Moment.js js 時(shí)間計(jì)算方法,結(jié)合實(shí)例形式分析了Moment.js js模塊時(shí)間計(jì)算的常用操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2023-05-05
  • 在linux中使用包管理器安裝node.js

    在linux中使用包管理器安裝node.js

    這篇文章主要介紹了在linux中使用包管理器安裝node.js的方法以及具體安裝過程,非常詳細(xì),推薦給大家,有需要的小伙伴參考下吧。
    2015-03-03
  • NodeJS Web應(yīng)用監(jiān)聽sock文件實(shí)例

    NodeJS Web應(yīng)用監(jiān)聽sock文件實(shí)例

    這篇文章主要介紹了NodeJS Web應(yīng)用監(jiān)聽sock文件實(shí)例,本文講解 NodeJS 的 TCP 和 HTTP 監(jiān)聽 Domain Socket 文件例子,需要的朋友可以參考下
    2015-02-02
  • 使用socket.io實(shí)現(xiàn)簡單聊天室案例

    使用socket.io實(shí)現(xiàn)簡單聊天室案例

    這篇文章主要介紹了使用socket.io實(shí)現(xiàn)簡單聊天室案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • 一文詳解如何使用node執(zhí)行js文件

    一文詳解如何使用node執(zhí)行js文件

    Node.js開發(fā)者過去通常將大多數(shù)可執(zhí)行命令發(fā)布為全局的軟件包,以使它們處于路徑中且可被立即地執(zhí)行,下面這篇文章主要給大家介紹了關(guān)于如何使用node執(zhí)行js文件的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • NodeJS學(xué)習(xí)筆記之Connect中間件應(yīng)用實(shí)例

    NodeJS學(xué)習(xí)筆記之Connect中間件應(yīng)用實(shí)例

    前面我們介紹了幾篇內(nèi)容的connect中間件的基礎(chǔ)知識,今天我們來實(shí)例應(yīng)用一下,做個(gè)記事本的小應(yīng)用,希望大家能夠喜歡。
    2015-01-01
  • 新版Node.js內(nèi)置支持.env文件使用詳解

    新版Node.js內(nèi)置支持.env文件使用詳解

    這篇文章主要為大家介紹了新版Node.js內(nèi)置支持.env文件使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09

最新評論