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

ゝ一纸荒年。 2023-08-17 16:27 106阅读 0赞

### 文章目录 ###

*   *  一、来自女朋友的切图需求
     *  二、一键切图大致原理
     *   *  1、大致思路
         *  2、linux下图片缩放工具
         *   *  （1）安装ImageMagick
             *  （2）子命令生成图片
             *  （3）查看生成图片尺寸信息
     *  三、生成不同尺寸logo的shell脚本
     *   *  1、脚本代码
         *  2、脚本在服务器的目录结构
         *  3、生成logo图片
         *  4、通过wincp把图片都下载下来
     *  四、其他
     *   *  1、脚本适用性
         *  2、windows下不能使用
         *  3、仍需完善

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

正在撸码的我，无意之中又听到了女朋友的叹息：“**切图太浪费时间了**“。是的，我的女朋友是一个`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把图片都下载下来 ###

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xKRlBIUA_size_16_color_FFFFFF_t_70]

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

## 四、其他 ##

### 1、脚本适用性 ###

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

### 2、windows下不能使用 ###

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

### 3、仍需完善 ###

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

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

**end**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xKRlBIUA_size_16_color_FFFFFF_t_70]: /images/20230810/9d6ca81ca2a147c3822048bc72907438.png