ios 获取图片主色简书

原创

mob64ca12f831ae 2024-10-15 05:46:26 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f831ae的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 获取图片主色 - 一步步解析

近年来，图像处理得到了越来越多的关注。在iOS开发中，获取图片的主要颜色是一项常见的需求，比如用作应用主题、设计元素等。接下来，我将为你详细介绍如何在iOS中实现“获取图片主色”的功能。

整体流程

下面是实现“获取图片主色”功能的整体流程：

步骤	说明
1	导入必要的库
2	读取图片
3	创建一个颜色提取器
4	从图片中提取主色
5	显示提取的主色

步骤细分

1. 导入必要的库

在开始编写代码之前，首先要确保你已经在Xcode中创建了一个新的iOS项目。记得引入Core Graphics和UIKit库，这些是进行图形处理和界面设计所需的。

import UIKit
import CoreImage

UIKit 是 iOS 界面开发的核心框架。
CoreImage 提供了处理图像的功能。

2. 读取图片

接下来，我们需要读取要分析的图片。这里有一个简单的示例：

func loadImage(named imageName: String) -> UIImage? {
    return UIImage(named: imageName)
}

该函数将图像名称作为参数，返回相应的UIImage对象。

3. 创建颜色提取器

要提取主色，我们需要解析图片的像素。这里我们使用CoreImage:

func extractDominantColor(from image: UIImage) -> UIColor? {
    guard let ciImage = CIImage(image: image) else {
        return nil
    }

    let context = CIContext(options: nil)
    let extent = ciImage.extent

    // 创建一个颜色提取器
    let filter = CIFilter(name: "CIAreaAverage")!
    filter.setValue(ciImage, forKey: kCIInputImageKey)
    filter.setValue(CIVector(x: extent.midX, y: extent.midY), forKey: kCIInputCenterKey)
    filter.setValue(extent.size, forKey: kCIInputRadiusKey)

    guard let outputImage = filter.outputImage,
          let bitmap = context.createCGImage(outputImage, from: extent) else {
        return nil
    }

    let averageColor = bitmap.averageColor
    return averageColor
}

CIAreaAverage过滤器会计算图像区域的平均颜色。
使用CIContext创建一个渲染上下文，可以处理CIImage。
guard let语句用于确保图像正确生成，避免潜在的崩溃。

4. 从图片中提取主色

我们还需要定义一个方法来获取CGImage的平均颜色：

extension CGImage {
    var averageColor: UIColor? {
        let data = self.dataProvider?.data
        let ptr = CFDataGetBytePtr(data)
        let width = self.width
        let height = self.height

        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        
        for y in 0..<height {
            for x in 0..<width {
                let offset = (width * y + x) * 4
                red += CGFloat(ptr?[offset] ?? 0) / 255.0
                green += CGFloat(ptr?[offset + 1] ?? 0) / 255.0
                blue += CGFloat(ptr?[offset + 2] ?? 0) / 255.0
                alpha += CGFloat(ptr?[offset + 3] ?? 0) / 255.0
            }
        }

        let pixelCount = CGFloat(width * height)
        return UIColor(red: red / pixelCount, green: green / pixelCount, blue: blue / pixelCount, alpha: alpha / pixelCount)
    }
}

通过扩展CGImage，我们可以获取图像的平均颜色。
使用ptr获取图像数据，每个像素由R、G、B和Alpha四个值构成。

5. 显示提取的主色

最后，我们需要在界面上展示提取的颜色。这可以通过简单的UIView实现：

class ColorDisplayView: UIView {
    var color: UIColor? {
        didSet {
            self.backgroundColor = color
        }
    }
}

// 在视图控制器中
let image = loadImage(named: "example.jpg")
if let dominantColor = extractDominantColor(from: image) {
    let colorDisplayView = ColorDisplayView()
    colorDisplayView.color = dominantColor
    // 将colorDisplayView添加到主界面
}

ColorDisplayView类增加了一个color属性，设置颜色时自动更新背景色。
在视图控制器中加载图像，提取主色后设置到显示视图。

类图

下面是用mermaid语法展示的类图：

classDiagram
    class ImageHandler {
        +UIImage loadImage(String imageName)
        +UIColor extractDominantColor(UIImage image)
    }
    class ColorDisplayView{
        +UIColor color
    }
    ImageHandler --> ColorDisplayView