来自妹子的需求：App的logo自动切图脚本

一、来自女朋友的切图需求

      正在撸码的我，无意之中又听到了女朋友的叹息：“切图太浪费时间了“。是的，我的女朋友是一个UI设计师，她设计的图片可以绕地球一周，但是设计师的痛点就是切图费劲，特别是给APP的logo切图的时候，一个logo要切10几个不同的大小，实在是痛苦。

      有mac电脑的UI还好一些，最起码有mac软件可以一键切图，但是在windows下就不是那么友好了。因此，我决定帮帮妹子，争取给他弄个一键切图工具，下面分享下一键切图的原理部分，脚本运行环境是debian系统服务器。

二、一键切图大致原理

      在网上百度的时候，看到一个ios大佬写了个一键切图的脚本，感觉思路相当不错，只可惜他的脚本中是使用的sips来实现批量缩放图片的，我们linux可没有这个东西，不过大佬的思路是极好的，我们可以找一下linux控制图片缩放尺寸的工具包。

大佬链接：https://www.jianshu.com/p/42e5becb4cb2

1、大致思路

（1）在脚本中获取要切的logo图片
（2）定义数组，数组里面是我们要切的尺寸大小和图片名称
（3）循环数组，然后使用linux下的缩放工具生成新图片
（4）把生成的新图片保存到新的文件夹中

2、linux下图片缩放工具

      经过百度，我们选用ImageMagick作为图片缩放的工具包，可以使用它的Convert的resize子命令，我们定义好图片的大小尺寸之后，就可以生成新图片的。

（1）安装ImageMagick

apt-get install ImageMagick

（2）子命令生成图片

convert -resize 图片名称 原图片 新文件夹。

（3）查看生成图片尺寸信息

identify icon20@16x.png

icon20@16x.png PNG 16x16 16x16+0+0 8-bit sRGB 236c 1.27KB 0.000u 0:00.000

可以看到这是16x16尺寸的图片

三、生成不同尺寸logo的shell脚本

      明确上面原理之后，博主按照女朋友的想法，定义了她想要的logo尺寸，一下生成11个文件，怪不得不想切图呢。。

1、脚本代码

#!/bin/bash
# 脚本使用方法：直接把脚本拖入终端 然后回车键即可执行
# ⚠️注意1：将脚本与logo放在同一个文件夹里
# ⚠️注意2：如果执行脚本时出现如下错误是因为文件权限不足，只需对其授权777即可



################## 参数配置logo图标名称（最好用1024x1024的logo）##################
filename="logo.png"


printf "
#######################################################################
#        博主名称：铁柱同学
#        博客链接：https://blog.csdn.net/LJFPHP
#######################################################################
"

dirname="icon_cutimg"
name_array=("icon20@16x.png" "icon20@60x.png" "icon20@72x.png" "icon20@80x.png" "icon20@90x.png" "icon20@96x.png" "icon20@120x.png" "icon20@144x.png" "icon20@180x.png" "icon20@512x.png" "icon20@1024x.png")
size_array=("16x16!" "60x60!" "72x72!" "80x80!" "90x90!" "96x96!" "120x120!" "144x144!" "180x180!" "512x512!" "1024x1024!")

# 获取脚本当前所在目录(即上级目录绝对路径)
root_dir=$(cd "$(dirname "$0")"; pwd)/
# 切换到当前脚本的工作目录
cd ${root_dir}
# 创建文件夹存放自动切图
mkdir $dirname

for((i=0;i<${#name_array[@]};++i)); do

m_dir=$dirname/${name_array[i]}

cp $filename $m_dir

convert -resize ${size_array[i]} $filename $m_dir
#convert -resize 500x500! $filename $m_dir
done

2、脚本在服务器的目录结构

ls
AutoCutting.sh   logo.png

logo.png是原logo图片，最好是1024x1024的
Auto 是咱们自动脚本的名称，记得给777权限

3、生成logo图片

在当前目录上执行：

./AutoCutting.sh

这里如果使用 sh 脚本名称 的方式启动的话，可能会报错：

Syntax error: "(" unexpected

      这是因为脚本没有指定执行的sh是哪个，可以考虑指定bash运行，也可以像博主这样直接 ./.sh脚本执行。

效果如下：

root@ljf:/home/ljf/img# ./AutoCutting.sh

#######################################################################
#        博主名称：铁柱同学
#        博客链接：https://blog.csdn.net/LJFPHP
#######################################################################
root@ljf:/home/ljf/img# ls                               
AutoCutting.sh  icon_cutimg  logo.png
root@ljf:/home/ljf/img# cd icon_cutimg/
root@ljf:/home/ljf/img/icon_cutimg# ls
icon20@1024x.png  icon20@144x.png  icon20@180x.png  icon20@60x.png  icon20@80x.png  icon20@96x.png
icon20@120x.png   icon20@16x.png   icon20@512x.png  icon20@72x.png  icon20@90x.png

      生成的icon_cutimg 里面就是我们需要的logo图片。查看能看到生成了我们想要的图片。

4、通过wincp把图片都下载下来

如图：

      OK，女朋友想要的尺寸全部生成。（PS: 虽然后几张看起来大小一样，实际上查看属性，分辨率已经是我们想要的分辨率了。）

四、其他

1、脚本适用性

      这个脚本适合各位大佬给自己女朋友使用，本质上实用性不高，毕竟没linux基础的人也用不了

2、windows下不能使用

      博主想在windows下试试，图片是生成了，但是尺寸没有变化，可能是因为没在windows下找到合适的控制图片缩放的工具。还是在linux上面方便，一行命令就搞定了

3、仍需完善

      这只是个初级版本，有时间的话可以做个工具，一切都是为了让女朋友开心，哈哈

      归根结底，还是因为女朋友没MAC的原因啊！博主背锅，看来买个MAC来设计是势在必行了！

end