來自妹子的需求：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 [email protected]

[email protected] 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=("[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]" "[email protected]")
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
[email protected]  [email protected]  [email protected]  [email protected]  [email protected]  [email protected]
[email protected]   [email protected]   [email protected]  [email protected]  [email protected]

      生成的icon_cutimg 裏面就是我們需要的logo圖片。查看能看到生成了我們想要的圖片。

4、通過wincp把圖片都下載下來

如圖：

      OK，女朋友想要的尺寸全部生成。（PS: 雖然後幾張看起來大小一樣，實際上查看屬性，分辨率已經是我們想要的分辨率了。）

四、其他

1、腳本適用性

      這個腳本適合各位大佬給自己女朋友使用，本質上實用性不高，畢竟沒linux基礎的人也用不了

2、windows下不能使用

      博主想在windows下試試，圖片是生成了，但是尺寸沒有變化，可能是因爲沒在windows下找到合適的控制圖片縮放的工具。還是在linux上面方便，一行命令就搞定了

3、仍需完善

      這只是個初級版本，有時間的話可以做個工具，一切都是爲了讓女朋友開心，哈哈

      歸根結底，還是因爲女朋友沒MAC的原因啊！博主背鍋，看來買個MAC來設計是勢在必行了！

end