Node.js用Jimp将texturepacker大图切成小图

在游戏日常开发中，我们经常会遇到没有texturepacker的原工程，因此要修改texturepacker合成的大图，就必须先把大图切割成小图。

node.js有很多可以操作图片的第三方库，比如gm,sharp等等，但这些基本都依赖原生库，很多原生库安装起来非常费劲，因此这里推荐jimp,它的安装非常简单，如下：

npm install jimp

安装完后就可以直接使用。

原理

实现原理很简单，实现步骤：

• 通过文件模块读取plist的数据，获取每张图片在大图里面的坐标和尺寸
• 通过jimp读取大图数据
• 将从plist文件中读取的数据传入到jimp
• 传入输入路径到jimp从，写出图片

// 遍历从plist中读取的数据
for (let key in framesData) {
    const frameInfo = framesData[key].frame;
    const splitKey = key.split("_");
    const picName = key + ".png";
    //小图输出路径
    const picPath = path.join(outputDir, picName);
    //读取大图数据
    Jimp.read(path.join(__dirname, splitItem[0]+".png"))
    .then((item) => {
       item
        .crop(frameInfo.x, frameInfo.y, frameInfo.w, frameInfo.h)//传入小图在大图中的坐标和尺寸
        .write(picPath);//写文件
    })
    .catch(err => {
      console.error(err);
    });
 }

上面用jimp通过调用crop截取小图的数据，最终通过写入文件，将小图输出到制定路径