本文是笔者用来记录学习 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)
}
}
需要注意：
上面
touchesBegan中是每次点击都去根据当前UIImageView的大小获取图像所有像素，实际应用中可在初始化时获取并保存，点击的时候直接调用即可；提取图像像素时需要根据当前显示的大小进行提取，这是因为使用
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 层的对象。
