DDGScreenShot —iOS 圖片裁剪，切圓角，加邊框，你還用cornerRadius，還有更高階的方法

東閣堂主發表於2018-04-28
iOS

寫在前面

我們肯定做過這樣的需求，給一個圖片切圓角，
當然我們大多采用簡單粗暴的方法
myIcon.layer.cornerRadius = 16.5
myIcon.layer.masksToBounds = true
如果是靜態的頁面也無關緊要，要是可以滑動的頁面，
有很多需要裁剪的圖片，那麼就要考慮效能了。接下來的方法就是其中一種不錯的方法，
此程式碼已經上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
歡迎檢視[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
當然這只是這個庫的功能的一小部分
想看更多功能，可以去github上下載，如果對您有幫助，希望您不吝給個star.
功能程式碼如下：
複製程式碼

DDGScreenShot 所有功能演示

image
image

具體程式碼

1，採用UIBezierPath繪製路徑的方法
let image = UIImage(named: imageName)
 //開啟上下文
 UIGraphicsBeginImageContext((image?.size)!)
 //設定一個圓形的裁剪區域
 let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                        y: 0,
                                        width: (image?.size.width)!,
                                        height: (image?.size.height)!))
        
//把路徑設定為裁剪區域(超出裁剪區域以外的內容會被自動裁剪掉)
path.addClip()
//把圖片繪製到上下文當中
image?.draw(at: CGPoint.zero)
//從上下文當中生成一張圖片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//關閉上下文
UIGraphicsEndImageContext()
newImage 就是我們需要的圖片

複製程式碼

可能你會懷疑效能，好，可以，我們放在子執行緒裡進行，程式碼如下

DispatchQueue.global().async{
            //將上述程式碼發放進去即可
            let image = UIImage(named: imageName)
 //開啟上下文
 UIGraphicsBeginImageContext((image?.size)!)
 //設定一個圓形的裁剪區域
 let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                        y: 0,
                                        width: (image?.size.width)!,
                                        height: (image?.size.height)!))
        
//把路徑設定為裁剪區域(超出裁剪區域以外的內容會被自動裁剪掉)
path.addClip()
//把圖片繪製到上下文當中
image?.draw(at: CGPoint.zero)
//從上下文當中生成一張圖片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//關閉上下文
UIGraphicsEndImageContext()
            DispatchQueue.main.async(execute: {
            //拿到 newImage 到主執行緒更新UI
                completed(newImage)
            })
        }
複製程式碼

似乎已經完美的解決了這個問題，可是擷取圓角固定的圓角該怎麼辦呢，繼續往下看，程式碼如下

  /**
     ** 用非同步繪圖方式將圖片進行任意圓角裁剪
     - imageName --傳頭頭像名稱
     - cornerRadius --傳頭頭像名稱
     */
    public func tailoringImage(_ imageName: String,withRadius radius: CGFloat) -> UIImage? {
        let image = UIImage(named: imageName)
        if image == nil {
            return UIImage()
        }
        //開啟上下文
        UIGraphicsBeginImageContext((image?.size)!)
        //設定一個圓形的裁剪區域
        let path = UIBezierPath(roundedRect: CGRect(x: 0,
                                                    y: 0,
                                                    width: (image?.size.width)!,
                                                    height: (image?.size.height)!), cornerRadius: radius)
        
        //把路徑設定為裁剪區域(超出裁剪區域以外的內容會被自動裁剪掉)
        path.addClip()
        //把圖片繪製到上下文當中
        image?.draw(at: CGPoint.zero)
        //從上下文當中生成一張圖片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //關閉上下文
        UIGraphicsEndImageContext()
        return newImage
    }
複製程式碼

當然也可以在子執行緒中進行

/**
     ** 用非同步繪圖方式將圖片進行任意圓角裁剪
     - imageName --傳頭頭像名稱
     - cornerRadius --要設定圓角的大小
     - parameter completed:    非同步完成回撥(主執行緒回撥)
     */
    public func async_tailoringImage(_ imageName: String,withRadius radius: CGFloat,completed:@escaping (UIImage?) -> ()) -> Void {
        DispatchQueue.global().async{
            let newImage = self.tailoringImage(imageName, withRadius: radius)
            DispatchQueue.main.async(execute: {
                completed(newImage)
            })
        }
    }
    //當然你還不滿意，因為產品一句：加上個邊框吧，總有辦法實現，不信，請看程式碼：
複製程式碼

切圓角，加邊框

/**
     ** 繪圖方式將圖片裁剪成圓角並新增邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     */
    public func tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ) -> UIImage? {
        //1.先開啟一個圖片上下文 ,尺寸大小在原始圖片基礎上寬高都加上兩倍邊框寬度.
        let imageSize = CGSize(width: image.size.width + width * 2 , height: image.size.height + width * 2)
        UIGraphicsBeginImageContext(imageSize)
        //2.填充一個圓形路徑.這個圓形路徑大小,和上下文尺寸大小一樣.
        //把大圓畫到上下文當中.
        let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                               y: 0,
                                               width: imageSize.width,
                                               height: imageSize.height))
        //顏色設定
        color.set()
        //填充
        path.fill()
        //3.新增一個小圓,小圓,x,y從邊框寬度位置開始新增,寬高和原始圖片一樣大小.把小圓設為裁剪區域.
        let clipPath = UIBezierPath(ovalIn: CGRect(x: width, y: width, width: image.size.width, height: image.size.height))
        //把小圓設為裁剪區域.
        clipPath.addClip()
        //4.把圖片給繪製上去.
        image.draw(at: CGPoint(x: width, y: width))
        //5.從上下文當中生成一張圖片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //6.關閉上下文
        UIGraphicsEndImageContext()
        return  newImage
    }
    /**
     ** 非同步繪圖方式將圖片裁剪成圓角並新增邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     - parameter completed:    非同步完成回撥(主執行緒回撥)
     */
    public func async_tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ,completed:@escaping (UIImage?) -> ()) -> Void {
        DispatchQueue.global().async{
            let newImage = self.tailoringImageLayer(image, borderWidth: width, borderColor: color)
            DispatchQueue.main.async(execute: {
                completed(newImage)
            })
        }
    }
複製程式碼

上圖片

image

結束語

總算大功告成，此程式碼已經上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
[link](https://github.com/dudongge/DDGScreenShot)
當然這只是這個庫的功能的一小部分
想看更多功能，可以去github上下載，如果對您有幫助，希望您不吝給個star.
複製程式碼

歡迎檢視DDGScreenShot

其餘功能如下

  1. (一)DDGScreenShot — 複雜螢幕截圖（如view ScrollView webView wkwebView）
  2. (二)DDGScreenShot--iOS 圖片處理--多圖片拼接
  3. (三)DDGScreenShot--iOS 圖片裁剪，切圓角，加邊框，你還用cornerRadius，還有更高階的用法
  4. (四)DDGScreenShot—圖片擦除功能
  5. (五)DDGScreenShot—擷取圖片的任意部分
  6. (六)DDGScreenShot —圖片加各種濾鏡高逼格操作

相關文章