Swift-技巧（一）縮放並填充圖片

• 2021 年 11 月 2 日
• 筆記
• Swift

摘要

直接操作圖片來實現它的縮放或者填充多餘空間，首選 UIGraphicsBeginImageContext 函數來實現，它就相當於一個畫布，你甚至可以用它來塗鴉。

最近有一個需求，就是將圖片先等比例縮放到指定大小，然後將空餘出來空間填充為黑色，返回指定大小的圖片。

這種直接操作圖片的需求，就要考慮使用 UIGraphicsBeginImageContext 函數實現。它可以理解為一個畫布，我們只需要把圖片放在畫布的對應位置，把畫布的多餘地方全部塗成黑色就完成。

實現

先看程式碼，然後再分析：

func rescaleAndPading(_ image: UIImage, targetSize: CGSize) -> UIImage? {
        let max = max(image.width, image.height)
        let ratio = Float(targetSize.width) / Float(max)
        
        let (newWidth, newHeight) = (
 
            Int(Float(image.width) * ratio),
            Int(Float(image.height) * ratio)
        )
        
        let (tarWidth, tarHeight) = (
            
            Int(targetSize.width),
            Int(targetSize.height)
        )
        
        let deltaW = tarWidth - newWidth
        let deltaH = tarHeight - newHeight
        
        let (y, x) = (
            
            deltaH / 2,
            deltaW / 2
        )
        
        // 創建繪圖上下文環境
        UIGraphicsBeginImageContext(targetSize)
        let context = UIGraphicsGetCurrentContext()
        // 黃色背景
        context?.setFillColor(UIColor.yellow.cgColor)
        context?.fill(CGRect(x: 0, y: 0, width: tarWidth, height: tarHeight))
        image.draw(in: CGRect(x: x, y: y, width: newWidth, height: newHeight))
        // 獲取上下文里的內容，將視圖寫入到新的影像對象
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }

看程式碼，總結出邏輯很簡單，就是首先根據目標的 size 來計算出需要縮放的比例（按照最大邊來處理），計算出圖片在畫布中的對應位置和縮放後的寬高。

最後就是重頭戲，調用 UIGraphicsBeginImageContext 來繪畫。這裡要留意幾個參數的設置：

• UIGraphicsBeginImageContext(targetSize) 中的 targetSize 是設置畫布的大小。
• image.draw(in:) 是圖片在畫布中的 rect 。
• context 是畫布的對象
• context?.setFillColor(_) 是設置畫布的顏色，若不設置，默認為 black（黑色）
• context?.fill()是設置畫布填充的 rect。

重點

如果是前面留意邏輯時，會發現邏輯中是先放置圖片，然後填充空餘空間，但是程式碼中是先填充全部空間，然後再放置圖片，這是為什麼？

經過測試後發現，後繪製的區域會覆蓋掉先前已經繪製的區域，所以程式碼中的處理就是防止填充區域覆蓋圖片區域。

另外

時間倉促，說的東西可能不全面，在你實現過程中遇到什麼問題，評論區給我留言，我會儘快回復。