<div id="readability-page-1" class="page"><div>                        
<p data-ke-size="size16"><code>UIImage</code>가 너무 큰 경우 보통은 auto layout을 통해 너비,높이를 잡아주거나 top,leading,trailing,bottom을 주어서 정해진 마진을 지키면서 이미지가 들어가도록 구현한 경험이 있을 것이다.</p>

<p data-ke-size="size16">만약 이미지 자체의 크기를 조절하고 싶다면 위 방법으로는 해결이 되지 않을 것이다. 이에 사용할 수 있는 방식이 이미지 리사이징이다.</p>
<p data-ke-size="size16">이미지 리사이징을 위해 사용되는 방법은 여러가지가 있지만 이번에는 <code>UIGraphicsBeginImageContextWithOptions(_:_:_:)</code>를 사용하는 방식을 알아보자.</p>

<p data-ke-size="size16">간략하게 순서를 먼저 알아보자.</p>
<ol data-ke-list-type="disc">
<li><code>UIGraphicsBeginImageContextWithOptions(_:_:_:)</code>로 비트맵 만들기</li>
<li><code>UIView.draw()</code>로 전달받은 사이즈만큼 다시 그려주기</li>
<li><code>UIGraphicsGetImageFromCurrentImageContext()</code> 메서드를 통해 크기가 조정된 이미지를 받아오기</li>
<li><code>UIGraphicsEndImageContext()</code>를 호출하여 비트맵을 그려주는 환경을 치워주기!</li>
</ol>
<h3 data-ke-size="size23"><b>1. <code>UIGraphicsBeginImageContextWithOptions(_:_:_:)</code></b></h3>
<pre data-ke-language="swift"><code>func UIGraphicsBeginImageContextWithOptions(_ size: CGSize, 
                                          _ opaque: Bool, 
                                          _ scale: CGFloat)</code></pre>
<p data-ke-size="size16">특정 옵션의 비트맵 기반의 그래픽 배경을 만들어주는 역할을 한다. 총 세 가지의 파라미터가 있다.</p>
<ul data-ke-list-type="disc">
<li><code>size</code>
<ul data-ke-list-type="disc">
<li>새로운 비트맵 배경(context)의 크기를 나타낸다.</li>
<li>이는 <code>UIGraphicsGetImageFromCurrentImageContext()</code> 메서드를 호출하여 반환할 이미지의 크기를 나타내기도 한다.</li>
<li>비트맵의 크기를 픽셀단위로 가져오려면, 이미지의 너비와 높이에 <code>scale</code> 파라미터로 오게 될 값을 곱해주면 된다.</li>
<li>즉 <code>너비 * 높이 * scale</code>을 의미하는 것이다.</li>
</ul>
</li>
<li><code>opaque</code>
<ul data-ke-list-type="disc">
<li>비트맵이 불투명한지 여부를 나타내는 Bool 타입의 값이다.</li>
<li>비트맵이 완전히 불투명하다는 것을 알고 있다면 값을<code>true</code>로 하여 alpha 채널을 무시하고 비트맵의 저장소를 최적화 할 수 있다.</li>
<li><code>false</code>로 할 경우, 비트맵에 부분적으로 투명한 픽셀을 처리할 수 있는 alpha 채널이 포함되어야 한다는 것을 의미한다.</li>
</ul>
</li>
<li><code>scale</code>
<ul data-ke-list-type="disc">
<li>비트맵에 적용할 축적 비율(scale factor)이다.</li>
<li>값을 0.0으로 주면 scale factor가 기기의 main screen의 scale factor로 설정된다.</li>
<li>기기마다 스케일 값은 다른데, 스케일 값은 <code>UIScreen.main.scale</code>로도 확인해 볼 수 있다.</li>
</ul>
</li>
</ul>
<p data-ke-size="size16">이 메서드를 통해 생성된 배경(context)가 현재 배경이며, <code>UIGraphicsGetImageFromCurrentImageContext()</code> 메서드를 호출하여 배경의 현재 내용을 기반으로 이미지 객체를 얻을 수 있다. 그리고 배경의 수정을 마치면 무조건 <code>UIGraphicsEndImageContext()</code> 메서드를 호출해서 비트맵을 그리는 환경을 정리하고, 배경 스택(context stack)의 맨 위에서 그래픽 배경(graphic context)를 제거해야한다. 스택에서 이러한 타입의 배경을 제거하는데 <code>UIGraphicsPopContext()</code>메서드를 사용하면 안된다고 한다.</p>

<p data-ke-size="size16">만약 다른 그래픽 배경을 가져오고 싶다면 push/pop을 하여 배경을 변경할 수 있다. 또한 <code>UIGraphicsGetCurrentContext()</code> 메서드를 사용하여 비트맵 배경을 가져올 수 있다.</p>

<p data-ke-size="size16">마지막으로 이 메서드의 경우 앱의 모든 쓰레드에서 호출할 수 있다고 하니 참고하자.</p>
<h3 data-ke-size="size23"><b>2. <code>draw(in: )</code></b></h3>
<pre data-ke-language="swift"><code>func draw(in rect: CGRect)</code></pre>
<p data-ke-size="size16">전체 이미지를 특정한 사각형 내에 그려주어 필요에 따라 크기를 조정해주는 역할을 한다.</p>
<p data-ke-size="size16">파라미터는 1개로 간단하다.</p>
<ul data-ke-list-type="disc">
<li><code>rect</code>
<ul data-ke-list-type="disc">
<li>이미지를 그려줄 사각형(그래픽 context의 좌표계에서의 사각형!)을 의미한다.</li>
</ul>
</li>
</ul>
<p data-ke-size="size16">이 메서드는 설정된 이미지의 방향을 고려하여 현재 그래픽 배경에 전체 이미지를 그려준다. 기본 좌표계에서 이미지는 지정된 사각형의 원점 오른쪽 아래쪽에 위치한다. 하지만 이 방법은 현재 그래픽 배경에 적용된 모든 변환들을 고려해준다.</p>

<p data-ke-size="size16">이 메서드는 <code>CGBlendMode.normal blend</code> 모드를 사용하여 이미지를 불투명하게 그려준다.</p>

<p data-ke-size="size16">이제 이미지를 그렸으니 얻어오기만 하면 된다.</p>
<h3 data-ke-size="size23"><b>3. <code>UIGraphicsGetImageFromCurrentImageContext</code></b></h3>
<pre data-ke-language="swift"><code>func UIGraphicsGetImageFromCurrentImageContext() -&gt; UIImage?</code></pre>
<p data-ke-size="size16">옵셔널 타입의 <code>UIImage</code>를 반환해주는 메서드이다. 이제 크기가 조정된 이미지를 받아줄 수 있는 것이다. 조금 더 자세히 이야기해보면, 현재 비트맵 그래픽 배경의 내용을 포함하는 이미지 객체를 반환해주는 것이다.</p>

<p data-ke-size="size16">다만 비트맵 기반 배경이 현재 그래픽 배경인 경우에만 이 메서드를 호출해야 한다. 즉, 앞에서 그래픽 배경(context)를 설정해주고 나서 호출해줘야 한다는 것이다. 그렇지 않고 현재 배경이 nil이거나 아직 <code>UIGraphicsBeginImageContext(_:)</code> 메서드 호출을 통해 생성되지 않은 경우에 위 메서드는 nil을 반환하게 된다.</p>

<p data-ke-size="size16">이 메서드 또한 앱의 모든 쓰레드에서 호출될 수 있다!</p>

<p data-ke-size="size16"><code>UIGraphicsBeginImageContext(_:)</code>는 또 뭔가..싶긴한데 아까 1번 과정에서 본 메서드랑 굉장히 유사하게 생긴 것을 알 수 있다.</p>

<p data-ke-size="size16">실제로도 문서를 보면 <code>UIGraphicsBeginImageContextWithOptions(_:_:_:)</code>의 opaque가 false이고, scale은 1.0으로 세팅된 메서드를 호출하는 것과 같다고 한다. 그래서인지 <code>CGRect</code>만 받도록 아래와 같이 구현되어 있다.</p>
<pre data-ke-language="swift"><code>func UIGraphicsBeginImageContext(_ size: CGSize)</code></pre>
<h3 data-ke-size="size23"><b>4. <code>UIGraphicsEndImageContext()</code></b></h3>
<pre data-ke-language="swift"><code>func UIGraphicsEndImageContext()</code></pre>
<p data-ke-size="size16">스택의 맨 위에서 현재 비트맵 기반 그래픽 배경을 제거하는 역할을 한다. 즉, 다 그리고 이미지를 사용하고나면 제거해주는 것이다.</p>

<p data-ke-size="size16">이 메서드를 사용하여 <code>UIGraphicsBeginImageContext(_:)</code> 메서드로 생성된 환경을 정리하고, 스택 상단에서 해당 비트맵 기반 그래픽 배경을 제거할 수 있다. 현재 배경이 <code>UIGraphicsBeginImageContext(_:)</code> 메서드를 통해 생성되지 않은 경우 이 메서드는 아무것도 수행하지 않는다!</p>

<p data-ke-size="size16">이 메서드 또한 앱의 모든 쓰레드에서 호출될 수 있다.</p>
<h3 data-ke-size="size23"><b>5. 구현 코드</b></h3>
<p data-ke-size="size16">설명이 조금 길었지만... 위 내용을 이해했다면 코드는 안봐도 구현할 수 있을 것이다.</p>
<p data-ke-size="size16"><code>UIView</code>를 extension하여 위 메서드들을 사용해서 이미지를 리사이징하는 방법을 구현해보자!</p>
<pre data-ke-language="swift"><code>extension UIImage {
    func resizeImageTo(size: CGSize) -&gt; UIImage? {
        // 비트맵 생성
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        // 비트맵 그래픽 배경에 이미지 다시 그리기
        self.draw(in: CGRect(origin: CGPoint.zero, size: size))
        // 현재 비트맵 그래픽 배경에서 이미지 가져오기
        guard let resizedImage = UIGraphicsGetImageFromCurrentImageContext() else {
            return nil
        }
        // 비트맵 환경 제거 
        UIGraphicsEndImageContext()
        // 크기가 조정된 이미지 반환
        return resizedImage
    }
}</code></pre>
<p data-ke-size="size16">그냥 앞선 설명을 그대로 코드로 갖다 넣은 정도이다!</p>
<p data-ke-size="size16"><br>이제 입맛에 맞게 이미지 크기를 조정해서 사용해 볼 수 있을 것이다.</p>
<p data-ke-size="size16">이미지 크기 자체가 줄어든다는 장점도 있겠지만, 이미지 자체가 줄어들기에 이미지 용량 또한 줄어든다는 것도 장점으로 꼽을 수 있을 것 같다.</p>

<p data-ke-size="size16">끄읕</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5">
<p data-ke-size="size16">Ref</p>

                        </div></div>

참신러닝(Fresh - Learning)

UIImage resizing
UIImage가 너무 큰 경우 보통은 auto layout을 통해 너비,높이를 잡아주거나 top,leading,trailing,bottom을 주어서 정해진 마진을 지키면서 이미지가 들어가도록 구현한 경험이 있을 것이다.
 
만약 이미지 자체의 크기를 조절하고 싶다면 위 방법으로는 해결이 되지 않을 것이다. 이에 사용할 수 있는 방식이 이미지 리사이징이다.
이미지 리사이징을 위해 사용되는 방법은 여러가지가 있지만 이번에는 UIGraphicsBeginImageContextWithOptions(_:_:_:)를 사용하는 방식을 알아보자.
 
간략하게 순서를 먼저 알아보자.
UIGraphicsBeginImageContextWithOptions(_:_:_:)로 비트맵 만들기
UIView.draw()로 전달받은 사이즈만큼 다시 그려주기
UIGraphicsGetImageFromCurrentImageContext() 메서드를 통해 크기가 조정된 이미지를 받아오기
UIGraphicsEndImageContext()를 호출하여 비트맵을 그려주는 환경을 치워주기!
1. UIGraphicsBeginImageContextWithOptions(_:_:_:)
func UIGraphicsBeginImageContextWithOptions(_ size: CGSize, 
                                          _ opaque: Bool, 
                                          _ scale: CGFloat)
특정 옵션의 비트맵 기반의 그래픽 배경을 만들어주는 역할을 한다. 총 세 가지의 파라미터가 있다.
size
새로운 비트맵 배경(context)의 크기를 나타낸다.
이는 UIGraphicsGetImageFromCurrentImageContext() 메서드를 호출하여 반환할 이미지의 크기를 나타내기도 한다.
비트맵의 크기를 픽셀단위로 가져오려면, 이미지의 너비와 높이에 scale 파라미터로 오게 될 값을 곱해주면 된다.
즉 너비 * 높이 * scale을 의미하는 것이다.
opaque
비트맵이 불투명한지 여부를 나타내는 Bool 타입의 값이다.
비트맵이 완전히 불투명하다는 것을 알고 있다면 값을true로 하여 alpha 채널을 무시하고 비트맵의 저장소를 최적화 할 수 있다.
false로 할 경우, 비트맵에 부분적으로 투명한 픽셀을 처리할 수 있는 alpha 채널이 포함되어야 한다는 것을 의미한다.
scale
비트맵에 적용할 축적 비율(scale factor)이다.
값을 0.0으로 주면 scale factor가 기기의 main screen의 scale factor로 설정된다.
기기마다 스케일 값은 다른데, 스케일 값은 UIScreen.main.scale로도 확인해 볼 수 있다.
이 메서드를 통해 생성된 배경(context)가 현재 배경이며, UIGraphicsGetImageFromCurrentImageContext() 메서드를 호출하여 배경의 현재 내용을 기반으로 이미지 객체를 얻을 수 있다. 그리고 배경의 수정을 마치면 무조건 UIGraphicsEndImageContext() 메서드를 호출해서 비트맵을 그리는 환경을 정리하고, 배경 스택(context stack)의 맨 위에서 그래픽 배경(graphic context)를 제거해야한다. 스택에서 이러한 타입의 배경을 제거하는데 UIGraphicsPopContext()메서드를 사용하면 안된다고 한다.
 
만약 다른 그래픽 배경을 가져오고 싶다면 push/pop을 하여 배경을 변경할 수 있다. 또한 UIGraphicsGetCurrentContext() 메서드를 사용하여 비트맵 배경을 가져올 수 있다.
 
마지막으로 이 메서드의 경우 앱의 모든 쓰레드에서 호출할 수 있다고 하니 참고하자.
2. draw(in: )
func draw(in rect: CGRect)
전체 이미지를 특정한 사각형 내에 그려주어 필요에 따라 크기를 조정해주는 역할을 한다.
파라미터는 1개로 간단하다.
rect
이미지를 그려줄 사각형(그래픽 context의 좌표계에서의 사각형!)을 의미한다.
이 메서드는 설정된 이미지의 방향을 고려하여 현재 그래픽 배경에 전체 이미지를 그려준다. 기본 좌표계에서 이미지는 지정된 사각형의 원점 오른쪽 아래쪽에 위치한다. 하지만 이 방법은 현재 그래픽 배경에 적용된 모든 변환들을 고려해준다.
 
이 메서드는 CGBlendMode.normal blend 모드를 사용하여 이미지를 불투명하게 그려준다.
 
이제 이미지를 그렸으니 얻어오기만 하면 된다.
3. UIGraphicsGetImageFromCurrentImageContext
func UIGraphicsGetImageFromCurrentImageContext() -> UIImage?
옵셔널 타입의 UIImage를 반환해주는 메서드이다. 이제 크기가 조정된 이미지를 받아줄 수 있는 것이다. 조금 더 자세히 이야기해보면, 현재 비트맵 그래픽 배경의 내용을 포함하는 이미지 객체를 반환해주는 것이다.
 
다만 비트맵 기반 배경이 현재 그래픽 배경인 경우에만 이 메서드를 호출해야 한다. 즉, 앞에서 그래픽 배경(context)를 설정해주고 나서 호출해줘야 한다는 것이다. 그렇지 않고 현재 배경이 nil이거나 아직 UIGraphicsBeginImageContext(_:) 메서드 호출을 통해 생성되지 않은 경우에 위 메서드는 nil을 반환하게 된다.
 
이 메서드 또한 앱의 모든 쓰레드에서 호출될 수 있다!
 
UIGraphicsBeginImageContext(_:)는 또 뭔가..싶긴한데 아까 1번 과정에서 본 메서드랑 굉장히 유사하게 생긴 것을 알 수 있다.
 
실제로도 문서를 보면 UIGraphicsBeginImageContextWithOptions(_:_:_:)의 opaque가 false이고, scale은 1.0으로 세팅된 메서드를 호출하는 것과 같다고 한다. 그래서인지 CGRect만 받도록 아래와 같이 구현되어 있다.
func UIGraphicsBeginImageContext(_ size: CGSize)
4. UIGraphicsEndImageContext()
func UIGraphicsEndImageContext()
스택의 맨 위에서 현재 비트맵 기반 그래픽 배경을 제거하는 역할을 한다. 즉, 다 그리고 이미지를 사용하고나면 제거해주는 것이다.
 
이 메서드를 사용하여 UIGraphicsBeginImageContext(_:) 메서드로 생성된 환경을 정리하고, 스택 상단에서 해당 비트맵 기반 그래픽 배경을 제거할 수 있다. 현재 배경이 UIGraphicsBeginImageContext(_:) 메서드를 통해 생성되지 않은 경우 이 메서드는 아무것도 수행하지 않는다!
 
이 메서드 또한 앱의 모든 쓰레드에서 호출될 수 있다.
5. 구현 코드
설명이 조금 길었지만... 위 내용을 이해했다면 코드는 안봐도 구현할 수 있을 것이다.
UIView를 extension하여 위 메서드들을 사용해서 이미지를 리사이징하는 방법을 구현해보자!
extension UIImage {
    func resizeImageTo(size: CGSize) -> UIImage? {
        // 비트맵 생성
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        // 비트맵 그래픽 배경에 이미지 다시 그리기
        self.draw(in: CGRect(origin: CGPoint.zero, size: size))
        // 현재 비트맵 그래픽 배경에서 이미지 가져오기
        guard let resizedImage = UIGraphicsGetImageFromCurrentImageContext() else {
            return nil
        }
        // 비트맵 환경 제거 
        UIGraphicsEndImageContext()
        // 크기가 조정된 이미지 반환
        return resizedImage
    }
}
그냥 앞선 설명을 그대로 코드로 갖다 넣은 정도이다!
이제 입맛에 맞게 이미지 크기를 조정해서 사용해 볼 수 있을 것이다.
이미지 크기 자체가 줄어든다는 장점도 있겠지만, 이미지 자체가 줄어들기에 이미지 용량 또한 줄어든다는 것도 장점으로 꼽을 수 있을 것 같다.
 
끄읕
 
Ref
 
https://developer.apple.com/documentation/uikit/1623922-uigraphicsbeginimagecontext
https://developer.apple.com/documentation/uikit/1623912-uigraphicsbeginimagecontextwitho
https://developer.apple.com/documentation/uikit/1623924-uigraphicsgetimagefromcurrentima
https://developer.apple.com/documentation/uikit/1623933-uigraphicsendimagecontext

[iOS] UIImage resizing (feat. UIGraphics)

댓글