iOS——寫一個快速定位問題的腳本

你是否見過？

1. 你是否見過測試人員或者本身在 CI 上 install 了一個版本，發現了 BUG 後，忽然忘了本身下的是 CI 上的哪個 commit 的包？
2. 你是否見過下面這個東西：

寫一個這樣一個腳本

能夠寫這樣一個腳本，它能作到：

1. 在 Build 的過程當中在 App Icon 的表面覆蓋上 Build 號、分支名、commit version 的 hash 值
2. 不影響本來的 App Icon 圖標源文件
3. 區分 Release 和 Debug，只在 Debug 環境下 Build 項目時執行腳本

Do it

ImageMagick

作後端的同窗們，大多知道 ImageMagick。

使用 ImageMagick 能夠建立、編輯、合成或轉換圖片。它能夠讀和寫各類格式的圖像（超過 200 種格式）包括 PNG、JPEG、JPEG - 2000、GIF、TIFF、DPX、EXR、WebP、Postscript、PDF、SVG。ImageMagick 能夠調整、翻轉、鏡像、旋轉、扭曲、剪切和轉換圖像、圖像色彩調整，適用於各類特殊效果,或繪製文本、線、多邊形、橢圓和貝塞爾曲線。

經過 shell command 就能夠輕易使用以上功能。

---

讓咱們來看一些基本的。這是咱們準備好的 120*120 的原圖：

cd 到圖片所在的目錄，執行如下命令，給圖片添加高斯模糊效果：

convert original.png -blur 10x8 blurred.png
複製代碼

完成圖：

---

繼續，執行如下命令從 座標 (0,60) 剪切成 120*60 的圖片，

convert blurred.png -crop 120x60+0+60 cropped-blurred.png
複製代碼

完成圖：

---

繼續，給圖片添加文字水印『zhoulingyu』，參數包括：背景不填充顏色、白色字體、字體大小 十二、居中顯示文字、文字爲『zhoulingyu』：

convert -background none -fill white -pointsize 12 -gravity center caption:"zhoulingyu" cropped-blurred.png +swap -composite label.png
複製代碼

完成圖：

---

繼續，將上面獲得的剪切好的帶水印的 label.png 和 原圖 original.png 合成在一塊兒：

composite label.png original.png finished-image.png
複製代碼

完成圖：

OK，咱們獲得了想要的效果圖。

參數參考

給出一些 ImageMagic 的經常使用用法：

1. 查看圖片信息

identify original.png 
original.png PNG 120x120 120x120+0+0 8-bit sRGB 46c 2.58KB 0.010u 0:00.000
複製代碼

2. 格式轉換

convert original.png original.jpg 
複製代碼

3. 編輯圖片大小

convert original.png -resize 200x200 resize-image.png 
複製代碼

4. 裁剪

# 從座標 (0,0) 裁剪 100*100 的圖像
convert original.png -crop 100x100+0+0 crop.png  
複製代碼

5. 旋轉

convert original.png -rotate 45 rotate.png 
複製代碼

6. 合併圖像

# 給圖片添加水印
convert original.png -compose over watermark.png -composite new-image.png  
複製代碼

7. 高斯模糊

convert -blur 80x5 original.jpg blur.png
複製代碼

-blur radiusxsigma，兩個分別是高斯模糊須要的兩個參數，具體能夠查看 blur 參數使用

ImageMagick 能夠實現 N 多效果，像油畫、噪聲、散射、旋渦，都不在話下。

除了基本的效果，還有一些比較經常使用的參數：

參數名	使用規範	說明	用例
-background	-background color	設置背景色	-background white
-pointsize	-pointsize value	設置字體等大小	-pointsize 12
-gravity	-gravity type	爲其餘命令附加 gravity，好比設置文字添加位置居中。	-gravity Center
-geometry	-geometry geometry	設置即將處理圖像的座標位置	-geometry +0+60 -geometry Center

固然這些均可以在 官方文檔 找到。

shell 腳本

1. 基本設置

知道 ImageMagic 如何使用，剩下來寫腳本就思路清晰多了。

在工程 Target -> Build Phases 中新建一個 Run Script，咱們能夠給它起名 generate auxiliary icon，這樣稍後容易在 Report Navigator 觀察。

如今咱們能夠開始編寫咱們的腳本 auxiliary_icon.sh

2. 理思路

寫僞代碼一般可以幫助我本身更清晰的寫代碼：

// 1. 判斷執行 Build 的機器是否安裝了 ImageMagic
//    |- 若是沒有安裝：提示安裝，退出腳本
//    |- 若是安裝：繼續執行
// 2. 獲取 commit 號 hash 值、分支名、build 號，並將其拼接成一個字符串
// 3. 判斷編譯環境
//    |- 若是是 Release 環境：提示當前是 Release 環境，退出腳本
//    |- 若是是非 Release 環境：繼續執行
// 4. 獲取 Plist 中 CFBundleIconFiles 的數量
// 5. 根據數量循環，執行調用『生成記號圖方法』


// 『生成記號圖方法』 
// function generateIcon() {
// 1. 模糊圖片
// 2. 截取圖片下半部分
// 3. 添加 commit+brach+build 組成的字符串在截取圖片上
// 4. 合成截取圖片和原圖
// 5. 清除多餘圖片
// }
複製代碼

僞代碼寫好了，開始編寫正式代碼：

1. 判斷執行 Build 的機器是否安裝了 ImageMagic

which 一下就知道

convertPath=`which convert`
# 判斷 convertPath 文件是否存在
if [ ! -f ${convertPath}]; then
echo "============== WARNING: 你須要先安裝 ImageMagick！！！！: brew install imagemagick =============="
exit 0;
fi
複製代碼

2. 獲取 commit 號 hash 值、分支名、build 號，並將其拼接成一個字符串

PlistBuddy 能夠用於讀取 Plist 文件，經過描述路徑就能夠找到你想知道的 Key 對應的 Value。 ${INFOPLIST_FILE} 是 xcodebuild 提供的變量（具體能夠參考 Build settings reference）提供了編譯後 info.plist 的路徑。

commit=`git rev-parse --short HEAD`
branch=`git rev-parse --abbrev-ref HEAD`
buildNumber=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}"`
caption="${buildNumber} \n${branch}\n${commit}"
複製代碼

3. 判斷編譯環境

# Release 不執行
echo "Configuration: $CONFIGURATION"
if [ ${CONFIGURATION} = "Release" ]; then
exit 0;
fi
複製代碼

4. 獲取 Plist 中 CFBundleIconFiles 的數量

在編譯後的 info.plist 中，能夠找到以下結構：

這裏記錄了全部的 Icon files。查看 plist 的原格式，能夠看到原始的 key 是什麼。經過 PlistBuddy 和 路徑 CFBundleIcons:CFBundlePrimaryIcon:CFBundleIconFiles 能夠輸出 value。

| wc -l 能夠統計輸出行數。

icon_count=`/usr/libexec/PlistBuddy -c "Print CFBundleIcons:CFBundlePrimaryIcon:CFBundleIconFiles" "${CONFIGURATION_BUILD_DIR}/${INFOPLIST_PATH}" | wc -l`
複製代碼

要注意的是， /usr/libexec/PlistBuddy -c "Print CFBundleIcons:CFBundlePrimaryIcon:CFBundleIconFiles" "${CONFIGURATION_BUILD_DIR}/${INFOPLIST_PATH}" 輸出結果是這樣的：

輸出一共是 五行，因此得到的結果是 5。

那麼真實的 CFBundleIconFiles count 實際上是：

real_icon_index=$((${icon_count} - 2))
複製代碼

剛開始，我也沒有注意。可想而知心情如何 =_=。

5. 根據數量循環，執行調用『生成記號圖方法』

for ((i=0; i<$real_icon_index; i++)); do
# 找到 icon 名
icon=`/usr/libexec/PlistBuddy -c "Print CFBundleIcons:CFBundlePrimaryIcon:CFBundleIconFiles:$i" "${CONFIGURATION_BUILD_DIR}/${INFOPLIST_PATH}"`

# 調用 generateIcon 方法，傳入 icon 名
generateIcon "${icon}@2x.png"

done
複製代碼

6. generateIcon 方法

function generateIcon() {
    originalImg=$1

    cd "${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"

    # 驗證存在性
    if [[ ! -f ${originalImg} || -z ${originalImg} ]]; then
    return;
    fi

    # 進入編譯後的工程目錄
    cd "${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/"

    # 添加高斯模糊
    convert ${originalImg} -blur 10x8 blur-original.png

    # 截取下部分
    width=`identify -format %w ${originalImg}`
    height=`identify -format %h ${originalImg}`
    height_0=`expr ${height} / 2`
    height_1=$((${height} - ${height_0}))
    convert blur-original.png -crop ${width}x${height_0}+0+${height_1} crop-blur-original.png

    # 加字
    point_size=$(((8 * $height) / 58))

    convert -background none -fill white -pointsize ${point_size} -gravity center caption:"${caption}" crop-blur-original.png +swap -composite label.png

    # 合成
    composite -geometry +0+${height_0} label.png ${originalImg} ${originalImg}

    # 清除文件
    rm blur-original.png
    rm crop-blur-original.png
    rm label.png
}
複製代碼

代碼清單

最終的代碼清單放在了 Github 上：

ZLYWatermarkIcon

參考

Command-line Tools:Convert 使用ImageMagick添加圖片水印－Linux krzysztofzablocki/IconOverlaying Overlaying application version on top of your icon 個人ImageMagick使用心得 高斯模糊的算法 Build settings reference Shell腳本編程30分鐘入門

---

有什麼問題均可以在博文後面留言，或者微博上私信我，或者郵件我 coderfish@163.com。

博主是 iOS 妹子一枚。

但願你們一塊兒進步。

個人微博：小魚周凌宇