ImageMagick实现图集图片拆分

发表于 | 更新于: 2021-12-28 | 分类于
字数统计: 503 | 阅读时长 ≈ 2 | 评论: | 阅读:

一、起因

有一个序列帧动画的图集和一个TexturePacker的json描述文件，需要将每一帧图片从图集中拆分下来。

二、下载安装ImageMagick

先去ImageMagick官网下载对应系统中的版本安装

三、使用

打开图集的json文件，能发现有类似的frames

{"frames": [
{
    "filename": "chicken_1_0.png",
    "frame": {"x":744,"y":79,"w":75,"h":93},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":11,"y":3,"w":75,"h":93},
    "sourceSize": {"w":99,"h":99}
}
...
],
}

从信息中可以读到单个图片信息：

  • 图片名:chicken_1_0.png
  • 在图集中的位置大小: {“x”:744,”y”:79,”w”:75,”h”:93},
  • 是否旋转90度(rotated)： 是
  • 单张图片中的位置大小: {“x”:11,”y”:3,”w”:75,”h”:93},
  • 单张图片的原始尺寸: {“w”:99,”h”:99}

使用ImageMagick命令直接将子图片裁剪出来，放到一张99x99的新图片中，做-90度旋转和11,3的位移就可以了。

magick chicken.png -crop 93x75+744+79 -rotate -90 -background none -gravity center -geometry +3+11 -extent 99x99 chicken_1_0.png

参数解析：

  • 源图片文件：chicken.png
  • -crop：裁剪。参数格式为： 宽x长{+-x}{+-y}。参数取frame值93x75+744，因为旋转-90度，所以，这里长和宽是对调的。
  • -rotate：旋转，顺时针为正，逆时针为负。rotated为true所以旋转-90度
  • -background：填充背景色，默认为白色，这里使用none不填充，png的话就是纯透明色
  • -gravity：参照点，会影响通过geometry、annotate、region等来定义坐标点，center为中心点
  • -geometry：移动，格式{+-x}{+-y}，将图片移动(x,y)个像素。取spriteSourceSize的(x、y)值国为旋转了-90度，所以x、y值对调(+3+11)
  • -extent：填充，将图片填充到多大。宽x高。取sourceSize的w、h值（99x99）
  • 最后输出文件：chicken_1_0.png

注：默认是按参数的顺序执行的，如果参数顺序反了输出的结果可能不是你想要的了

0%