精靈圖在網(wǎng)頁開發(fā)中使用是相當(dāng)多的，將一系列的小圖標(biāo)制作在一張大圖上，減少了網(wǎng)絡(luò)請(qǐng)求的次數(shù)，文章開頭的兩種webgl地圖，也支持使用精靈圖，顯示地圖上的POI圖標(biāo)，精靈圖可以使用PS等畫圖工具，將圖標(biāo)擺放在一張圖片上，記錄每個(gè)圖標(biāo)擺放的位置等信息，本文介紹一種，使用nodejs開發(fā)制作精靈圖方式。

類庫引用

開發(fā)使用的類庫是：node-images，
安裝方式：npm install imagesnpm簡(jiǎn)略說明網(wǎng)址：
https://www.npmjs.com/package/node-images

實(shí)現(xiàn)思路

1、使用images(width,?height)創(chuàng)建一張透明的空白圖片；

2、需要寫到同一張圖片的圖標(biāo)，按照名稱規(guī)律或者放置在同一個(gè)文件夾中，

遍歷進(jìn)行讀取；

示例：nodejs讀取文件夾中的文件列表，獲取后綴名

? ? ? ?fs.readdir("文件夾路徑",?(err,?files)?=>?{

??? ? ? ?? ?if?(err)

? ? ? ? ? ? ? ? return?console.log(err);

? ? ? ?? ? ? ???files.forEach((file)?=>?{?

? ? ? ? ? ? ? ? console.log(path.extname(file));?

? ? ? ? ? ? });

3、獲取每個(gè)圖標(biāo)的長(zhǎng)寬，images('圖標(biāo)路徑').width()，images('圖標(biāo)路徑').height()；4、在空白大圖片上，按照行或者列的方式，使用bigimages.draw(iconimage)的方式，將小圖標(biāo)添加到空白圖片上去；5、使用json文件，記錄每個(gè)圖標(biāo)，在大圖片上的坐標(biāo)位置和長(zhǎng)寬信息。