node.js精灵图制作

精灵图在网页开发中使用是相当多的，将一系列的小图标制作在一张大图上，减少了网络请求的次数，文章开头的两种webgl地图，也支持使用精灵图，显示地图上的POI图标，精灵图可以使用PS等画图工具，将图标摆放在一张图片上，记录每个图标摆放的位置等信息，本文介绍一种，使用nodejs开发制作精灵图方式。

类库引用

开发使用的类库是：node-images，
安装方式：npm install imagesnpm简略说明网址：
https://www.npmjs.com/package/node-images

实现思路

1、使用images(width, height)创建一张透明的空白图片；

2、需要写到同一张图片的图标，按照名称规律或者放置在同一个文件夹中，

遍历进行读取；

示例：nodejs读取文件夹中的文件列表，获取后缀名

       fs.readdir("文件夹路径", (err, files) => {

            if (err)

                return console.log(err);

                files.forEach((file) => { 

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

            });

3、获取每个图标的长宽，images('图标路径').width()，images('图标路径').height()；4、在空白大图片上，按照行或者列的方式，使用bigimages.draw(iconimage)的方式，将小图标添加到空白图片上去；5、使用json文件，记录每个图标，在大图片上的坐标位置和长宽信息。