이미지 회전 문제의 발생 원인과 해결방법

[JIWON1923]

#84

• 4:3 이미지를 저장하면, 이미지가 회전하는 이슈가 존재한다.
• png를 jpeg으로 저장하니 이미지가 회전하지 않았다.
• 안나가 원인도 잘 찾아주고 잘 해결해주었지만, 근본적인 원인이 궁금해서 조사해봤습니다!

왜? 이유가 너무 궁금하다!

PNG와 JPEG(=JPG)의 차이점

1. JPEG (Joint Photographic Experts Group)

   압축 손실 방식으로, 압축률이 매우 뛰어나 파일 용량에 비해 우수한 품질의 이미지를 구현한다. 작고 호환성이 좋아서 웹 사이트나 카메라에 저장하는 용도로 사용한다. 하지만 압축 과정에서 품질저하는 발생한다. 이에 많은 선이 존재하거나, 문자가 많은 경우는 JPEG를 사용하는 것을 추천하지 않는다.

2. PNG (Portable Network Graphics)

   비손실 압축 방식으로, 이미지 데이터를 모두 유지할 수 있다. JPEG의 단점을 보완해주는 파일로 용량은 크지만 품질 저하가 없고, 투명도를 지원하기 때문에 합성이나 웹 그래픽 이미지에 적합하다.

---

그렇다면 왜 SwiftUI에서 이미지 회전이 발생했을까?

• 글을 저장할 때, imageOrientation.rawValue를 통해 값을 확인해봤다.

- 4:3 비율의 이미지에서 image orientation이 3임을 발견할 수 있었다. (이 이유는 애플만 알겠..지?)
- 즉, 이미지의 방향이 `right`이며 시계 방향으로 90도 회전된 모습을 볼 수 있다.

---

결론

• pngData()와 jpegData(compressionQuality: )의 정확한 차이점은 찾을 수 없었다. 하지만 jpegData의 경우, 회전된 orientation(right)을 다시 0(up)으로 변환하여 데이터를 저장하고 있었고, pngData의 경우, 회전된 데이터 그대로를 저장하고 있었다.

무조건 png를 사용해야하는 상황이라면?

func rotatedCopy() -> UIImage {
    if self.imageOrientation == UIImage.Orientation.up {
        return self
    }

    UIGraphicsBeginImageContext(size)

    //draws the image in current context respecting orientation
    draw(in: CGRect(origin: CGPoint.zero, size: size))
    let copy = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return copy!
 }

• 이런식으로 imageOrientation이 up (0)일 때에는 그대로 return하고, 그렇지 않을 때에는 방향을 맞춰 이미지를 그리는 방식으로 저장하면 된다고 한다!

---

출처

1. png와 jpeg의 차이점
   Tistory
   Tistory

2. Image Orientation
   애플 공식 문서

3. 무조건 png를 사용해야한다면?
   stack overflow
   stack overflow

[YunSeok-Choi]

저도 전에 이런 이슈가 있어서 잠깐 찾아봤었는데 4:3 이나 16:9 가 아닌 사용자가 편집하여 자른 이미지 비율에 따라서도 회전하는 방향이 완전 달라지더라구요! 저 같은 경우는 사용자가 편집한 이미지 비율에도 정학하지는 못하지만 임의로 계산해서 회전시켰던 기억이 있네요!
좋은 글 감사합니다!!! 쏘이 쵝오!👍👍

[JIWON1923]

임의로 크기를 자르는 경우도 방향이 달라지는군요!! 공유 감사해요 융식 👍