Genta Hirauchi

公開日：2020/04/02
更新日：2020/08/03

【Swift CIFilter】CITemperatureAndTintで色合いを補正する方法を解説

  • 画像の色合いを補正する方法が知りたい。

SwiftのCore Imageには、CIFilterという、画像の補正を行うことができるクラスがあります。

CIFilterには、さまざなま画像補正のフィルタが用意されております。本記事では、その中のCITemperatureAndTintというフィルタを使用し、画像の色合いを補正する方法を解説致します。

目次

CITemperatureAndTintについて

CITemperatureAndTintは、色温度と色合いを補正する際に使用されるCore Image Filterです。

CITemperatureAndTintには、以下のパラメータがあります。

inputImage 入力画像（補正をかける画像）
inputNeutral 色温度と色合いのベクトル値
デフォルト値：[6500, 0]、最小値：[-, -]、最大値：[-, -]
inputTargetNeutral 色温度と色合いのターゲットとなるベクトル値
デフォルト値：[6500, 0]、最小値：[-, -]、最大値：[-, -]

Reference： CITemperatureAndTint | Core Image Filter Reference

CITemperatureAndTintで色合いを補正する方法

では、CITemperatureAndTintで、色合いを補正する方法を解説致します。

以下は、スライダーを動かすと、その値を色合い値として、画像の補正を行うサンプルコードです。

  • ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var valueSlider: UISlider!
    @IBOutlet weak var valueLabel: UILabel!

    private var ciFilter: CIFilter!

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "色合い"

        guard let uiImage = UIImage(named: "sample"), let ciImage = uiImage.ciImage ?? CIImage(image: uiImage) else { return }

        imageView.image = uiImage

        // Filterに合わせた最大値、最小値、初期値の設定
        valueSlider.maximumValue = 100
        valueSlider.minimumValue = -100
        valueSlider.value = 0

        valueLabel.text = String(valueSlider.value)

        // CIFilterの生成
        ciFilter = CIFilter(name: "CITemperatureAndTint")

        // 入力画像の設定
        ciFilter.setValue(ciImage, forKey: kCIInputImageKey)
    }

    @IBAction func valueChanged(_ sender: UISlider) {
        valueLabel.text = String(sender.value)

        // 色合いの設定
        ciFilter.setValue(CIVector(x: 6500, y: CGFloat(sender.value)), forKey: "inputNeutral")
        ciFilter.setValue(CIVector(x: 6500, y: 0), forKey: "inputTargetNeutral")

        // Filter適応後の画像を表示
        if let filteredImage = ciFilter.outputImage {
            imageView.image = UIImage(ciImage: filteredImage)
        }
    }
}

CIFilter(name: “CITemperatureAndTint”)で、CITemperatureAndTintフィルタのインスタンスを生成しております。

その後、生成したCIFilterのインスタンスに対し、setValue(ciImage, forKey: kCIInputImageKey)で、入力画像の設定を行っております。

スライダーの値が変更されたら、setValue(6500, y: CIVector(x: CGFloat(sender.value)), forKey: “inputNeutral”)で、色合い値の設定を行います。

そして、outputImageで、色合いが補正されたCIImageを取得し、UIImageに変換後、画面に表示しております。

Point
  • CIFilter(name: “CITemperatureAndTint”)で、フィルタを生成する
  • setValue(CIImage, forKey: kCIInputImageKey)で、入力画像を設定する
  • setValue(CIVector(x:6500, y: 色合い値), forKey: “inputNeutral”)で、色合い値を設定する
  • outputImageで、補正されたCIImageを取得する

まとめ

  • CIFilter(name: “CITemperatureAndTint”)で、フィルタを生成する
  • setValue(CIImage, forKey: kCIInputImageKey)で、入力画像を設定する
  • setValue(CIVector(x: 6500, y: 色合い値), forKey: “inputNeutral”)で、色合い値を設定する
  • outputImageで、補正されたCIImageを取得する

関連記事