版本记录

前言

Core Image是IOS5中新加入的一个框架，里面提供了强大高效的图像处理功能，用来对基于像素的图像进行操作与分析。还提供了很多强大的滤镜，可以实现你想要的效果，下面我们就一起解析一下这个框架。感兴趣的可以参考上面几篇。
1. Core Image框架详细解析（一） —— 基本概览
2. Core Image框架详细解析（二） —— Core Image滤波器参考
3. Core Image框架详细解析（三） —— 关于Core Image
4. Core Image框架详细解析（四） —— Processing Images处理图像（一）
5. Core Image框架详细解析（五） —— Processing Images处理图像（二）
6. Core Image框架详细解析（六） —— 图像中的面部识别Detecting Faces in an Image（一）
7. Core Image框架详细解析（七） —— 自动增强图像 Auto Enhancing Images
8. Core Image框架详细解析（八） —— 查询系统中的过滤器 Querying the System for Filters
9. Core Image框架详细解析（九） —— 子类化CIFilter：自定义效果的配方 Subclassing CIFilter: Recipes for Custom Effects（一）
10. Core Image框架详细解析（十） —— 子类化CIFilter：自定义效果的配方 Subclassing CIFilter: Recipes for Custom Effects（二）
11. Core Image框架详细解析（十一） —— 获得最佳性能 Getting the Best Performance
12. Core Image框架详细解析（十二） —— 使用反馈处理图像 Using Feedback to Process Images
13. Core Image框架详细解析（十三） —— 在写一个自定义滤波器之前你需要知道什么？
14. Core Image框架详细解析（十四） —— 创建自定义滤波器 Creating Custom Filters（一）
15. Core Image框架详细解析（十五） —— 创建自定义滤波器 Creating Custom Filters（二）
16. Core Image框架详细解析（十六） —— 包装和加载图像单元 Packaging and Loading Image Units
17. Core Image框架详细解析（十七） —— 一个简单说明和示例（一）
18. Core Image框架详细解析（十八） —— 使用Metal Shading Language创建你自己的Core Image滤波器进行像素级图像处理（一）

源码

1. Swift

首先看下工程组织结构

下面就是源码了

1. ImageProcessor.swift

import UIKit
import CoreImage

enum ProcessEffect {
  case builtIn
  case colorKernel
  case warpKernel
  case blendKernel
}

class ImageProcessor {
  static let shared = ImageProcessor()
  let context = CIContext()
  @Published var output = UIImage()

  func process(painting: Painting, effect: ProcessEffect) {
    guard
      let paintImage = UIImage(named: painting.image),
      let input = CIImage(image: paintImage)
    else {
      print("Invalid input image")
      return
    }
    switch effect {
    case .builtIn:
      applyBuiltInEffect(input: input)
    case .colorKernel:
      applyColorKernel(input: input)
    case .warpKernel:
      applyWarpKernel(input: input)
    case .blendKernel:
      applyBlendKernel(input: input)
    }
  }

  private func applyBuiltInEffect(input: CIImage) {
    let noir = CIFilter(
      name: "CIPhotoEffectNoir",
      parameters: ["inputImage": input]
    )?.outputImage
    let sunGenerate = CIFilter(
      name: "CISunbeamsGenerator",
      parameters: [
        "inputStriationStrength": 1,
        "inputSunRadius": 300,
        "inputCenter": CIVector(
          x: input.extent.width - input.extent.width / 5,
          y: input.extent.height - input.extent.height / 10)
      ])?
      .outputImage
    let compositeImage = input.applyingFilter(
      "CIBlendWithMask",
      parameters: [
        kCIInputBackgroundImageKey: noir as Any,
        kCIInputMaskImageKey: sunGenerate as Any
      ])
    if let outputImage = renderAsUIImage(compositeImage) {
      output = outputImage
    }
  }

  private func applyColorKernel(input: CIImage) {
    let filter = ColorFilter() // PassthroughFilter()
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func applyWarpKernel(input: CIImage) {
    let filter = WarpFilter() // PassthroughFilter()
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func applyBlendKernel(input: CIImage) {
    guard  let backgroundImage = UIImage(named: "multi_color") else {
      return
    }
    let filter = BlendFilter(backgroundImage: backgroundImage)
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func renderAsUIImage(_ image: CIImage) -> UIImage? {
    if let cgImage = context.createCGImage(image, from: image.extent) {
      return UIImage(cgImage: cgImage)
    }
    return nil
  }
}

2. FilterListView.swift

import SwiftUI
import CoreImage

struct FilterListView: View {
  let filterList = CIFilter.filterNames(inCategory: nil)

  var body: some View {
    NavigationView {
      List(filterList, id: \.self) { filter in
        NavigationLink(destination: FilterDetailView(filter: filter)) {
          Text(filter)
        }
      }
      .navigationTitle("Filter List")
    }
  }
}

struct FilterList_Previews: PreviewProvider {
  static var previews: some View {
    FilterListView()
  }
}

3. FilterDetailView.swift

import SwiftUI
import CoreImage

struct FilterDetailView: View {
  var filter: String

  var body: some View {
    if let ciFilter = CIFilter(name: filter) {
      ScrollView {
        Text(ciFilter.attributes.description)
      }
    } else {
      Text("Unknown filter!")
    }
  }
}

4. PaintingWall.swift

import SwiftUI

struct PaintingWall: View {
  @State private var selectedPainting: Painting?
  let paintings: [Painting]
  let columns = [GridItem()]

  var body: some View {
    ScrollView {
      LazyVGrid(columns: columns, alignment: .center, spacing: 10) {
        ForEach(0..<paintings.count) { index in
          ZStack {
            Button(
              action: {
                selectedPainting = paintings[index]
                var effect = ProcessEffect.builtIn
                if let painting = selectedPainting {
                  switch index {
                  case 0:
                    effect = .builtIn
                  case 1:
                    effect = .colorKernel
                  case 2:
                    effect = .warpKernel
                  case 3:
                    effect = .blendKernel
                  default:
                    effect = .builtIn
                  }
                  ImageProcessor.shared.process(painting: painting, effect: effect)
                }
              },
              label: {
                Image(paintings[index].image)
                  .resizable()
                  .scaledToFit()
                  .overlay(OverlayContent(title: paintings[index].name), alignment: .bottom)
              })
          }
        }
      }
    }
    .sheet(item: $selectedPainting) { item in
      DetailView(painting: item)
    }
  }
}

struct OverlayContent: View {
  let title: String

  var body: some View {
    Text(title)
      .font(.title)
      .fontWeight(.regular)
      .frame(maxWidth: .infinity)
      .foregroundColor(Color.black)
      .background(Color.white)
      .opacity(0.7)
  }
}

struct DetailView: View {
  var imageProcessor = ImageProcessor.shared
  let painting: Painting

  var body: some View {
    ScrollView {
      VStack {
        Image(painting.image)
          .resizable()
          .aspectRatio(contentMode: .fit)
          .overlay(OverlayContent(title: "Input"), alignment: .bottom)
        Image(uiImage: imageProcessor.output)
          .resizable()
          .aspectRatio(contentMode: .fit)
          .overlay(OverlayContent(title: "Output"), alignment: .bottom)
      }
    }
    .padding()
  }
}

struct PaintingWall_Previews: PreviewProvider {
  static var previews: some View {
    let paintings = Gallery().paintings
    PaintingWall(paintings: paintings)
  }
}

5. ContentView.swift

import SwiftUI

struct ContentView: View {
  @State var showFilterListUI = false
  let paintings = Gallery().paintings

  var body: some View {
    VStack {
      HStack {
        Spacer()
        Button(
          action: {
            self.showFilterListUI.toggle()
          }, label: {
            Text("Filter List")
          })
          .padding(.trailing)
          .sheet(isPresented: $showFilterListUI) {
            FilterListView()
          }
      }
      PaintingWall(paintings: paintings)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

6. BlendFilter.swift

import CoreImage
import UIKit

class BlendFilter: CIFilter {
  let background: CIImage?

  init(backgroundImage: UIImage) {
    background = CIImage(image: backgroundImage)
    super.init()
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  var inputImage: CIImage?

  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return .none }
    guard let background = background else { return .none }

    return CIBlendKernel.multiply.apply(
      foreground: inputImage,
      background: background)
  }
}

7. WarpFilter.swift

import Foundation
import CoreImage

// 1
class WarpFilter: CIFilter {
  var inputImage: CIImage?
  // 2
  static var kernel: CIWarpKernel = { () -> CIWarpKernel in
    guard let url = Bundle.main.url(
      forResource: "WarpFilterKernel.ci",
      withExtension: "metallib"),
    let data = try? Data(contentsOf: url) else {
      fatalError("Unable to load metallib")
    }

    guard let kernel = try? CIWarpKernel(
      functionName: "warpFilter",
      fromMetalLibraryData: data) else {
      fatalError("Unable to create warp kernel")
    }

    return kernel
  }()

  // 3
  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return .none }

    return WarpFilter.kernel.apply(
      extent: inputImage.extent,
      roiCallback: { _, rect in
        return rect
      },
      image: inputImage,
      arguments: [])
  }
}

8. WarpFilterKernel.ci.metal

#include <metal_stdlib>
using namespace metal;

#include <CoreImage/CoreImage.h>

extern "C" {
  namespace coreimage {
    float2 warpFilter(destination dest) {
      float y = dest.coord().y + tan(dest.coord().y / 10) * 20;
      float x = dest.coord().x + tan(dest.coord().x/ 10) * 20;
      return float2(x,y);
    }
  }
}

9. ColorFilter.swift

import Foundation
// 1
import CoreImage

class ColorFilter: CIFilter {
  // 2
  var inputImage: CIImage?

  // 3
  static var kernel: CIKernel = { () -> CIColorKernel in
    guard let url = Bundle.main.url(
      forResource: "ColorFilterKernel.ci",
      withExtension: "metallib"),
      let data = try? Data(contentsOf: url) else {
      fatalError("Unable to load metallib")
    }

    guard let kernel = try? CIColorKernel(
      functionName: "colorFilterKernel",
      fromMetalLibraryData: data) else {
      fatalError("Unable to create color kernel")
    }

    return kernel
  }()

  // 4
  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return nil }
    return ColorFilter.kernel.apply(
      extent: inputImage.extent,
      roiCallback: { _, rect in
        return rect
      },
      arguments: [inputImage])
  }
}

10. ColorFilterKernel.ci.metal

#include <metal_stdlib>
using namespace metal;

#include <CoreImage/CoreImage.h>

extern "C" {
  namespace coreimage {
    float4 colorFilterKernel(sample_t s) {
      float4 swappedColor;
      swappedColor.r = s.g;
      swappedColor.g = s.b;
      swappedColor.b = s.r;
      swappedColor.a = s.a;
      return swappedColor;
    }
  }
}

11. Gallery.swift

import Foundation

struct Gallery {
  let paintings: [Painting] = {
    guard let paintingsJson = Bundle.main.url(
      forResource: "paintings",
      withExtension: "json") else {
      fatalError("Unable to load paintings")
    }
    do {
      let jsonData = try Data(contentsOf: paintingsJson)
      return try JSONDecoder().decode([Painting].self, from: jsonData)
    } catch {
      fatalError("Unable to parse the paintings json")
    }
  }()
}

12. Painting.swift

import Foundation

struct Painting: Decodable, Identifiable {
  let name: String
  let image: String
  var id = UUID()

  enum CodingKeys: CodingKey {
    case name
    case image
  }
}

13. AppMain.swift

import SwiftUI

@main
struct AppMain: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

后记

本篇主要讲述了使用Metal Shading Language创建你自己的Core Image滤波器进行像素级图像处理，感兴趣的给个赞或者关注~~~~