[ iOS ] ScrollView 화면 캡쳐하기 (Image Creation)

문제

무다, 꾸주니 등 몇몇 앱들은 화면을 캡쳐한 듯 이미지화해 저장 또는 공유하는 기능을 제공한다. 오늘은 이 기능을 구현할 예정인데, 화면 캡쳐에서 더 나아가 화면 밖 아래로 내용이 계속 이어지는 ScrollView의 전체 화면을 캡쳐하는, 즉 이미지화하는 작업을 정리할 것이다.
이 기능을 구현하여 UIActivityViewController를 사용해 이미지를 인스타그램에 공유할 수 있다.
 
 

UIGrapics~

UIKit에는 Image와 PDF 을 생성하고 Drawing 할 수 있는 여러 클래스와 함수들을 제공한다. 이번에 알아볼 함수는 Image와 PDF의 Image Creation 파트에 나오는 함수 중 아래 3개와 Drawing의 Shadows/Graphics Context Promitives의 함수 1개이다.

함수 명	설명
func UIGraphicsBeginImageContext(_ size: CGSize)	비트맵 기반의 그래픽 context를 생성하고 이 context를 현재 context로 만든다.
func UIGraphicsBeginImageContextWithOptions( _ size: CGSize, _ opaque: Bool, _ scale: CGFloat )	특정 옵션을 가진 비트맵 기반의 그래픽 context를 생성한다.
func UIGraphicsGetImageFromCurrentImageContext() -> UIImage?	현재 비트맵 기반의 그래픽 context의 content로부터 이미지를 반환한다.
func UIGraphicsEndImageContext()	스택의 top에서 비트맵 기반의 현재 그래픽 context를 제거한다. **context는 stack구조이다

 
 
함수를 사용하기 전 context와 렌더링을 이해해야한다. context가 캠버스, 렌더링이 그림 그리기라고 생각하면 쉽다.

1. UIGraphicBeginImageContext 함수: 그림을 그릴 때 캔버스가 먼저 준비되어야한다. 따라서 캔버스(context)를 준비한다.
2. render 함수(아래에서 설명): 그후 현재 준비된 캔버스에 그림을 그린다.
3. UIGraphicsGetImageFromCurrentImageContext 함수: 그림을 다 그렸으면 캔버스에서 그림을 가져온다.
4. UIGrphicsEndImageContext 함수: 마지막으로 캔버스를 제거하여 화실을 정리한다.

 
나는 첫 번째 context를 만드는 과정에서 그냥 BeginImageContext가 아니라 BeginImageContextWithOptions 함수를 사용할 것이다. 그냥 BeginImageContext 함수는 Options 함수의 scale 파라미터의 값이 1.0으로 설정되어 있다. scale은 비트맵의 크기를 구하기 위해 너비, 높이와 함께 곱해져 이미지 크기를 정한다. 따라서 화질에도 영향을 미쳐 낮은 화질의 이미지가 반환된다. scale이 0.0의 경우 기기의 화면 scale을 의미하여 좋은 화질의 이미지를 반환받을 수 있다. 
위와 같은 이유로 UIGraphicsBeginImageContextWithOptions 함수를 사용하여 scale을 조정해줄 것이다.
 
 
 

Rendering

렌더링은 위 설명에서 알 수 있듯이 그림을 그리는 것이다. 렌더링하는 함수 또한 여러가지가 있다.

메서드 명	설명
func drawHierarchy( in rect: CGRect, afterScreenUpdates afterUpdates: Bool ) -> Bool	현재 context에 화면에 보이는 것처럼 완전한 view 계층의 snapShot을 렌더링한다. 이 메서드는 view 이미지에 블러와 같은 그래픽 효과를 넣고자 할 때 사용한다.
func snapshotView(afterScreenUpdates afterUpdates: Bool) -> UIView?	현재 view의 content에 기반한 snapShot을 반환한다. 이미 렌더링된 현재 view의 모습을 capture 하는 것이기 때문에 drawHierarchy 함수보다 속도가 빠르다.
func render(in ctx: CGContext)	제공된 context에 해당 layer와 하위 layer를 렌더링한다.

 
우리는 화면 안뿐만 아니라 밖으로 가려진 부분 또한 렌더링해야하기 때문에 render 함수를 사용할 것이다. 
 
 
 
 

ScrollView의 Content 영역

ScrollView는 frame과 content 영역의 의미가 다르다. scrollView 안에 내용이 길어진다면 그건 content의 영역이 길어짐을 의미한다. 즉 scrollView.contentSize가 달라지는 것이다.
 

 
 
이 점으로 보아서 우리는 scroll의 frame이 contentSize만큼 늘어나야 한다는 걸 알 수 있다. 더해서 contentOffset을 .zero(x:0, y:0)로 변경해 content가 처음 내용부터 잘 렌더링될 수 있게 해야한다.
 

 

 

렌더링 문제

render 함수는 해당 뷰의 layer와 하위 layer를 렌더링한다. 하지만 우리는 scrollView뿐만 아니라 그 SuperView인 view의 frame도 contentSize만큼 조정할 것이며 scrollView가 아닌 view의 layer를 렌더링 할 것이다.
왜냐하면 render가 해당하는 view의 layer를 렌더링해주지만 만약 self.view.frame, 즉 기기의 화면에 가려져 안 보이는 부분은 렌더링해주지 않기 때문이다. 아래 사진의 검은색 부분이 바로 렌더링되지 않은 context 부분이다.
 

 
 
또 view.frame을 contentSize로 조정하지 않으면 scrollView의 content가 짧아도 화면의 크기만큼 렌더링되기 때문에 content 영역만 렌더링하기 위해서는 frame을 조정할 필요가 있다.
 

 
 
또 신경써야 할 부분은 AutoLayout을 safeAreaLayoutGuide에 설정했는지 아님 SuperView인 view에 설정했는지이다. 이에 따라 NavigationBar 사이즈만큼 오차가 생길 수도 있다.
 
 
 
 

 

 

구현

 

extension UIView {
    
    func snapShotFullScreen(scrollView: UIScrollView) -> UIImage? {
        //scrollView의 contentSize만큼 scrollView.frame과 self.view.frame의 크기를 조정
        //그리고 scrollView가 아닌 self.view의 layer를 렌더링한다.
        //그 후 scrollView.frame과 self.view.frame을 원상복구한다.
        //즉 self.view.frame의 영역만큼 context(캠버스)를 만들고 그 영역만큼 렌더링(그리기)하는 과정이다.
        
        let savedFrame = self.frame
        let savedScrollviewFrame = scrollView.frame
        let savedContentOffset = scrollView.contentOffset
        let scrollFrame = CGRect(x: 0, y: 0, width: scrollView.contentSize.width, height: scrollView.contentSize.height)
        
        scrollView.contentOffset = .zero
        scrollView.frame = scrollFrame
        self.frame = scrollFrame
        
        //context는 stack 구조
        //해당 옵션을 가진 Context를 하나 생성
        //캠퍼스 준비
        UIGraphicsBeginImageContextWithOptions(self.frame.size, true, 0.0)
        
        //그리기
        //위에서 만든 context에 현재 보여지고 있는 화면 렌더링
        self.layer.render(in: UIGraphicsGetCurrentContext()!)

        //현재 이미지가 그려진 context에서 이미지 가져오기
        guard let image = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        
        scrollView.contentOffset = savedContentOffset
        scrollView.frame = savedScrollviewFrame
        self.frame = savedFrame

        //캠퍼스 폐기
        //context pop
        UIGraphicsEndImageContext()

        return image
    }
}

 
 
 
+ iOS 17 이상에서도 사용할 수 있는 방법

[ iOS ] 화면 캡쳐하기 - UIGraphicsRenderer