[iOS] UIGraphicsImageRendererを使用して画像のリサイズや着色を行う

はじめに

CX事業本部の平屋です。

本記事では、UIGraphicsImageRendererを使用して画像のリサイズや着色を行う実装を紹介します。

UIGraphicsImageRendererの概要は以下の記事で紹介しています。

• [iOS 10] UIGraphicsImageRenderer について | DevelopersIO

検証環境

• macOS Catalina 10.15.6
• Xcode Version 12.4

リサイズを行う

早速実装を紹介します。

以下は、指定サイズにリサイズするresized(size:)の実装例です。

リサイズ後のサイズを指定してUIGraphicsImageRendererを作成し、image(actions:)メソッドの引数内で描画を行い、リサイズされたUIImageを生成します。

import UIKit

extension UIImage {
    func resized(size: CGSize) -> UIImage {
        // リサイズ後のサイズを指定して`UIGraphicsImageRenderer`を作成する
        let renderer = UIGraphicsImageRenderer(size: size)

        return renderer.image { (context) in
            // 描画を行う
            draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

使用例

以下のようにサイズを指定して画像を生成できます。

imageView.image = UIImage(named: "star")?.resized(size: CGSize(width: 100, height: 100))

着色を行う

以下は、指定色に着色するtinted(color:)の実装例です。1つの画像から色違いの画像を生成する場合などに使用できます。

UIGraphicsImageRendererを作成し、image(actions:)メソッドの引数内で描画を行い、着色されたUIImageを生成します。

import UIKit

extension UIImage {
    func tinted(color: UIColor) -> UIImage {
        // `UIGraphicsImageRenderer`を作成する
        let renderer = UIGraphicsImageRenderer(size: size)

        return renderer.image { context in
            // 背景を指定色で塗りつぶす
            color.setFill()
            context.fill(context.format.bounds)

            // 背景と画像の重なっている部分が表示されるように描画する
            draw(in: context.format.bounds, 
                 blendMode: .destinationIn, 
                 alpha: 1.0)
        }
    }
}

使用例

こちら元画像です。透明の背景に星が描かれています。

tinted(color:)を使用して青く着色した画像を生成すると、

imageView.image = UIImage(named: "star")?.tinted(color: .blue)

以下の結果になります。

さいごに

本記事では、UIGraphicsImageRendererを使用して画像のリサイズや着色を行う実装を紹介しました。

UIGraphicsImageRendererを使えば、描画の処理を少し書くだけでリサイズや着色を実現できました! 画像加工の処理を実装をしている方の参考になれば幸いです。

参考資料

• UIGraphicsImageRenderer | Apple Developer Documentation
• [iOS 10] UIGraphicsImageRenderer について | DevelopersIO
• Image Resizing Techniques - NSHipster
• Testing out the new UIGraphicsImageRenderer class on iOS 11
• SwiftのCGBlendModeを一部解説するよ - Qiita