iOS 图像处理（一）：获取某一点位置的像素

本文是笔者用来记录学习 iOS 图像处理相关的文章，内容可能有部分不对，可以通过评论或私信交流。本文所有代码都是 Swift 3.0

---

前言

一直以来，笔者很想实现这么一个功能：获取一张图片，用户可以从图片中进行取色，更进一步，可以通过相机对现实中的景色进行取色；

现在就以从图片中取色这么一个功能来作为开篇。

实现

实现效果

获取颜色.gif

笔者思路

最开始，对于这么一个功能，笔者的思路是：获取图片所有像素，将用户点击的位置转换为图片中的像素索引，获取目标像素。

获取图片所有像素：

public extension UIImage {
    
    /// 根据图片大小提取像素
    ///
    /// - parameter size: 图片大小
    ///
    /// - returns: 像素数组
    public func extraPixels(in size: CGSize) -> [UInt32]? {
        
        guard let cgImage = cgImage else {
            return nil
        }
        
        let width = Int(size.width)
        let height = Int(size.height)
        // 一个像素 4 个字节，则一行共 4 * width 个字节
        let bytesPerRow = 4 * width
        // 每个像素元素位数为 8 bit，即 rgba 每位各 1 个字节
        let bitsPerComponent = 8
        // 颜色空间为 RGB，这决定了输出颜色的编码是 RGB 还是其他（比如 YUV）
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        // 设置位图颜色分布为 RGBA
        let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue
        
        var pixelsData = [UInt32](repeatElement(0, count: width * height))
        
        guard let content = CGContext(data: &pixelsData, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo) else {
            return nil
        }
        
        content.draw(cgImage, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

        return pixelsData
    }
}

根据用户点击位置获取颜色：

public override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = touches.first else {
        return
    }
    // 获取用户点击位置在图像上的相对位置
    let point = touch.location(in: imageView0)
    // 将点击位置转换为像素索引（实际应用时此处应做空判断）
    let pixelIndex = imageView0.pixelIndex(for: point) ?? 0
    // 根据图像大小提取图像像素（实际应用时此处应做空判断）
    let pixels = imageView0.pixels ?? []
    // 获取目标像素（实际应用时此处应做范围判断）
    view.backgroundColor = imageView0.extraColor(for: pixels[pixelIndex])
}

public extension UIImageView {
    
    /// 图像像素
    public var pixels: [UInt32]? {
        return image?.extraPixels(in: bounds.size)
    }
    
    /// 将位置转换为像素索引
    ///
    /// - parameter point: 位置
    ///
    /// - returns: 像素索引
    public func pixelIndex(for point: CGPoint) -> Int? {
        let size = bounds.size
        guard point.x > 0 && point.x <= size.width
            && point.y > 0 && point.y <= size.height else {
            return nil
        }
        return (Int(point.y) * Int(size.width) + Int(point.x))
    }
    
    /// 将像素值转换为颜色
    ///
    /// - parameter pixel: 像素值
    ///
    /// - returns: 颜色
    public func extraColor(for pixel: UInt32) -> UIColor {
        let r = Int((pixel >> 0) & 0xff)
        let g = Int((pixel >> 8) & 0xff)
        let b = Int((pixel >> 16) & 0xff)
        let a = Int((pixel >> 24) & 0xff)
        return UIColor(intRed: r, green: g, blue: b, alpha: a)
    }
}

需要注意：

1. 上面 touchesBegan 中是每次点击都去根据当前 UIImageView 的大小获取图像所有像素，实际应用中可在初始化时获取并保存，点击的时候直接调用即可；

2. 提取图像像素时需要根据当前显示的大小进行提取，这是因为使用 UIImageView 显示图像时，图像会根据显示大小进行缩放，此时显示的像素分布与 UIImage 的像素分布是完全不同的，因此在获取某一点的像素，必须根据当前显示大小进行处理；

另一种实现

上面的实现需要先获取图像的所有像素数据，比较占内存；有另一种实现，不需要获取所有像素数据：

public extension UIView {
    
    /// 获取特定位置的颜色
    ///
    /// - parameter at: 位置
    ///
    /// - returns: 颜色
    public func pickColor(at position: CGPoint) -> UIColor? {
        
        // 用来存放目标像素值
        var pixel = [UInt8](repeatElement(0, count: 4))
        // 颜色空间为 RGB，这决定了输出颜色的编码是 RGB 还是其他（比如 YUV）
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        // 设置位图颜色分布为 RGBA
        let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue
        guard let context = CGContext(data: &pixel, width: 1, height: 1, bitsPerComponent: 8, bytesPerRow: 4, space: colorSpace, bitmapInfo: bitmapInfo) else {
            return nil
        }
        // 设置 context 原点偏移为目标位置所有坐标
        context.translateBy(x: -position.x, y: -position.y)
        // 将图像渲染到 context 中
        layer.render(in: context)
        
        return UIColor(red: CGFloat(pixel[0]) / 255.0,
                       green: CGFloat(pixel[1]) / 255.0,
                       blue: CGFloat(pixel[2]) / 255.0,
                       alpha: CGFloat(pixel[3]) / 255.0)
    }
}

根据用户点击位置获取颜色：

public override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = touches.first else {
        return
    }
    // 获取用户点击位置在图像上的相对位置
    let point = touch.location(in: imageView0)
    view.backgroundColor = imageView0.pickColor(at: point)
}

可以看到笔者将 pickColor 作为 UIView 的扩展，因为这适用于所有拥有 layer 层的对象。