[swift] 킹피셔를 사용하여 이미지 다운로드 중에 텍스트를 이미지 위에 적용하는 방법은?

27 Nov 2023

swift

킹피셔(Kingfisher)는 스위프트(Swift)로 작성된 이미지 다운로드 및 캐싱 라이브러리입니다. 이미지를 다운로드할 때 텍스트를 이미지 위에 적용하는 방법은 다음과 같습니다.

텍스트를 이미지로 변환합니다. 텍스트를 이미지로 변환하는 방법은 여러 가지가 있습니다. Core Graphics를 사용하여 이미지 컨텍스트를 만들고 텍스트를 그려서 이미지로 변환할 수 있습니다. 예를 들어, 다음과 같이 텍스트를 이미지로 변환하는 함수를 작성할 수 있습니다.

func textToImage(text: String, font: UIFont, size: CGSize, color: UIColor) -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: size)
    
    let image = renderer.image { context in
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center
        
        let attributes: [NSAttributedString.Key: Any] = [
            .font: font,
            .foregroundColor : color,
            .paragraphStyle: paragraphStyle
        ]
        
        let attributedString = NSAttributedString(string: text, attributes: attributes)
        
        attributedString.draw(with: CGRect(x: 0, y: 0, width: size.width, height: size.height), options: .usesLineFragmentOrigin, context: nil)
    }
    
    return image
}

이 함수는 지정된 텍스트, 폰트, 크기 및 색상으로 이미지를 생성합니다.

Kingfisher를 사용하여 이미지를 다운로드합니다. Kingfisher의 setImage(with:placeholder:) 메서드를 사용하여 이미지를 다운로드하고 표시할 수 있습니다. 이 때, 다운로드가 완료된 후에 텍스트를 이미지 위에 적용해야 합니다.

let imageView = UIImageView()
let placeholderImage = UIImage(named: "placeholder")

// Kingfisher를 사용하여 이미지 다운로드 및 표시
imageView.kf.setImage(with: URL(string: "https://example.com/image.jpg"), placeholder: placeholderImage) { result in
    switch result {
    case .success(let value):
        // 이미지 다운로드가 성공한 경우

        // 텍스트를 이미지로 변환
        let textImage = textToImage(text: "Hello", font: UIFont.systemFont(ofSize: 16), size: value.image.size, color: UIColor.white)
        
        // 텍스트 이미지 적용
        let mergedImage = value.image.maskWithImage(maskImage: textImage)
        
        // 이미지 뷰에 표시
        imageView.image = mergedImage
        
    case .failure(let error):
        // 이미지 다운로드가 실패한 경우
        print("Image download failed: \(error)")
    }
}

위의 코드에서 textToImage(text:font:size:color:) 함수는 앞에서 작성한 텍스트를 이미지로 변환하는 함수입니다. maskWithImage(maskImage:) 메서드는 이미지 위에 다른 이미지를 적용하는데 사용되며, 이를 통해 텍스트 이미지를 기존 이미지 위에 적용할 수 있습니다.

이제 킹피셔를 사용하여 이미지 다운로드 중에 텍스트를 이미지 위에 적용하는 방법을 알게 되었습니다. 이를 활용하여 다양한 이미지 다운로드 및 텍스트 적용 시나리오에 적용해보세요!

참고 문서:

Kingfisher Documentation