环境要求php
1. 安装 GraphicsMagicktypescript
下载地址：npm
http://www.graphicsmagick.org/json
2. 安装 ImageMagic微信
下载地址：ui
https://imagemagick.org/index.phpspa
3. 安装 gm
.net
直接命令行安装： npm install --save gm
命令行
环境变量配置code
GraphicsMagick 和 ImageMagic 安装完之后，须要把对应执行文件所在目录添加到环境变量，以下图所示。
实现切割逻辑
读取大图对应的数据文件（我这里用到的是 json 文件，其余格式的，能够根据实际格式修改对应逻辑），获取大图的，根据数据信息，读取对应位置和大小的图片，保存到本地便可，裁剪图片主要用下面的方法进行实现。
gm('png图片路径') .crop(width, height, x, y) .write(`碎图保存路径`, err => { if(err != null){ console.log(err); } });
下图是实现时选择的大图对应 atlas 数据文件，格式化后的样式。
上图能够看出来，取出 frames 内的全部图片信息，就能够在大图内裁剪每张图片了，图片的名字同时也能获取获得。
具体实现代码以下：
var gm = require('gm');var fs = require('fs');const { createCipher } = require('crypto');
var atlasname = '';var pngname = '';var filepath = '';
process.stdout.write('please enter filename:\n');process.stdin.on('data', e => { let str = e.toString(); str = str.substring(0, str.indexOf('\r')); filepath = `./pic/${str}`; atlasname = `${filepath}.atlas`; pngname = `${filepath}.png`;
fs.mkdirSync(filepath); let data = fs.readFileSync(atlasname); let json = JSON.parse(data.toString());
for(var key in json.frames){ console.log(`${key}`); var frame = json.frames[key].frame; gm(pngname) .crop(frame.w, frame.h, frame.x, frame.y) .write(`./${filepath}/${key}`, err => { if(err != null){ console.log(err); } } ); }});
上图是按照本身方便获取图片的格式进行的实现，能够根据本身的须要，进行逻辑修改便可，还能够添加批量处理。
上图是裁剪前的大图，下图是裁剪后成张的碎图。
扫码关注，获取更多分享！！
本文分享自微信公众号 - 一枚小工（caizj_cn）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。