【Swift】画像がギザギザに表示されてしまう問題のTips【画像粗い】【ジャギー除去】

Last updated at 2024-04-02Posted at 2024-04-02

■ 概要

本記事では、

Swiftでの開発中において、画像が粗く表示されてしまう

→ 画像が「ジャギる」場合の簡単な対処法

について紹介したいと思います。

■ 環境

Xcodeバージョン　：　15.3

■ 実装

まずは今回のサンプル実装から。

CIFilterの「CINoiseReduction」フィルターを使用した実装です。

名前の通りでノイズを軽減し、画像がジャギるのを改善するフィルターで、
通常使用の範囲であれば、実装が簡単でとても便利なフィルターです。

（より高度な「ノイズ除去」やカスタマイズ性の高い「ぼかし処理」としてMetalなどのシェーディング言語を使った実装もありますが、実装がかなり大変です…。）

import UIKit

class ExternalViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        
        let w = CGFloat(view.bounds.size.width)
        let h = CGFloat(view.bounds.size.height)
        
        let imageSize = CGSize(width: w * 0.5, height: w * 0.5)

        // inputのCIImageを生成
        let ciImage = CIImage(contentsOf: URL(fileURLWithPath: Bundle.main.path(forResource: "logo", ofType: "png") ?? ""))
        // ジャギー除去のフィルターをかける
        let filteredCiImage = applyNoiseReductionBlurToImage(inputImage: ciImage ?? CIImage())
        // CIImage → UIImageに変換
        let filteredUiImage = convertCIImageToUIImage(ciImage: filteredCiImage ?? CIImage())

        // 画面中央に画像を配置
        let imageView = UIImageView(frame: CGRect(x: (w - imageSize.width) * 0.5,
                                                  y: (h - imageSize.height) * 0.5,
                                                  width: imageSize.width,
                                                  height: imageSize.height))
        imageView.contentMode = .scaleAspectFit
        
        imageView.image = filteredUiImage
        view.addSubview(imageView)
    }

    // ジャギー除去のCIFilterをかける関数
    func applyNoiseReductionBlurToImage(inputImage: CIImage) -> CIImage? {
    
        guard let noiseReductionFilter = CIFilter(name: "CINoiseReduction") else {
            fatalError("Specified filter does not exist")
        }

        noiseReductionFilter.setValue(inputImage, forKey: kCIInputImageKey)
        
        // これらの値（1.0）は必要に応じて調整する
        noiseReductionFilter.setValue(1.0, forKey: "inputNoiseLevel")
        noiseReductionFilter.setValue(1.0, forKey: "inputSharpness")

        guard let outputImage = noiseReductionFilter.outputImage else {
            fatalError("Failed to get output image from filter")
        }
        
        return outputImage
    }

    // CIImage → UIImageに変換する関数
    func convertCIImageToUIImage(ciImage: CIImage) -> UIImage? {
    
        let context = CIContext()
        
        guard let cgImage = context.createCGImage(ciImage, from: ciImage.extent) else {
            fatalError("Failed to create CGImage from CIImage")
        }
        
        return UIImage(cgImage: cgImage)
    }
}