前言：

在第一篇文章中我们提到了位图图形上下文，今天我们就来详细的介绍下位图图形上下文。
......第二篇指南还没写完，两章一起写的，先发这章吧......

一、概述

在上一篇中我们已经说过通过UIGraphicsBeginImageContextWithOptions函数创建位图图形上下文的方法，并且苹果也建议我们使用这种方法来创建位图上下文，那为什么我们还要说另一种位图上下文的创建呢？因为其不局限在drawRect里才能调用，最重要的是位图图形上下文对图片的处理有着巨大的优势，还有图像蒙版的运用也需要这方面的知识。
这篇文章我们通过实现取色器来简单的了解下位图图形上下文。

二、创建位图图形上下文

我们通过CGBitmapContextCreate创建位图图形上下文，此方法含有7个参数，分别如下：

• data：创建上下文的大小，此内存块的大小应至少为（bytesPerRow* height）个字节，有趣的是在iOS中我们指定NULL就可以了，系统会为我们自动分配和释放所需的内存。
• width：指定位图上下文的宽度（以像素为单位）。
• height：指定位图上下文的高度（以像素为单位）。
• bitsPerComponent：指定内存中每个像素分量使用的位数。例如，对于32bpp的像素格式和RGB颜色空间，您可以指定8。
• bytesPerRow：指定位图中每行像素使用的内存字节数，有意思的是，当我们指定 0 时，系统不仅会为我们自动计算，而且还会进行 cache line alignment的优化（与data形成16字节对齐，会获得最佳性能）。
• colorspace：用于位图上下文的颜色空间。
• bitmapInfo：位图布局信息。

前面三个参数我们不多说，后面几个参数有些同学可能一脸懵逼，下面来介绍一下这几个参数：

ColorSpace：颜色空间

Quartz中的颜色由一组值表示，没有指示如何解释颜色信息的颜色空间，这些值是没有意义的，说白了就是颜色空间就是告诉Quartz怎么解析这些值的，比如以下的四种颜色空间都表示蓝色，图摘自官方文档：

颜色空间

如果不知道颜色空间，那么我们根本无法知道这些值所代表的颜色，如果提供错误的色彩空间，则可能会出现相当大的差异，如下图所示，虽然BGR和RGB颜色空间中的绿色被解释为相同，但红色和蓝色值会翻转。

应用不同颜色空间的同一张图片
在iOS中我们常用的一般有三种：

• kCGColorSpaceGenericGray：灰度颜色空间，范围从绝对黑色（值0.0）到绝对白色（值1.0）的单个值。
• kCGColorSpaceGenericRGB：最常用的RGB颜色空间，一个三分量颜色空间（红色，绿色和蓝色），用于模拟在彩色显示器上组成单个像素的方式，RGB颜色空间的每个组件的范围从0.0（零强度）到1.0（全强度）。
• kCGColorSpaceGenericCMYK：CMYK颜色空间，这是一个四色组件颜色空间（青色，品红色，黄色和黑色），用于模拟在打印过程中墨水堆积的方式，CMYK颜色空间的每个组件的范围从0.0（不吸收颜色）到1.0（完全吸收颜色）。

Pixel Format：像素格式

大家应该都知道位图其实就是一个像素数组（不知道的面壁思过），像素从左到右从上到下有序排列，那像素又是怎么组成的呢？像素格式就是用来描述一个像素的组成，像素格式由以下信息组成：

• bitsPerComponent：指定内存中每个像素分量使用的位数，就是像素中每个单独颜色的位数。
• 每像素的位数，此值必须至少为每个像素分量的位数乘以每个像素的像素分量数，通过颜色空间得到。
• bytesPerRow：指定位图中每行像素使用的内存字节数。

在OS中位图上下文支持以下17种像素格式：

支持的像素格式
我们可以看到iOS支持其中的八种，像素格式的更深含义请参考官方文档，这里不在赘述。
其中bpp代表每像素的位数，bpc也就是bitsPerComponent。这又引申出另一个概念，像素分量-就是像素中的每个单种颜色，像素分量的位数代表这个像素能表示多少种颜色，下图可以很清晰的看出一个像素的组成：

联想到我们通过[UIColor colorWithRed:178 / 255.0 green:233 / 255.0 blue:89 / 255.0 alpha:0];这样的函数生成颜色对象时，是不是到这里恍然大悟？因为RGB的每个像素分量都是8位，8位能表示的颜色正好是0~255共256种颜色。
所以看到这里是不是对实现取色器已经有了自己想法呢？我们可以通过Quartz取到位图的data，然后取到当前所指的像素的data，通过像素分量和像素分量位数就能知道当前点的色值。
甚至通过对像素的控制，我们能针对性找到特定颜色的像素，从而找出特定颜色在图片中的位置范围，通过指南（一）中的裁剪上下文函数我们就能实现简单的抠图功能，amazing！
当然实现这些功能前，我们还得了解最后一个参数，位图布局信息。

位图布局信息：

为了确保Quartz正确解释每个像素的位，您还必须指定：

• 位图是否包含Alpha通道，我们知道Quartz支持RGB，CMYK和灰色空间，同事它也支持alpha（透明度），但alpha信息并不适用于所有位图图像格式，当它可用时，alpha分量可以位于像素的最高有效位或最低有效位中。
• 对于具有alpha分量的位图，颜色分量是否已经乘以alpha值，预乘alpha表示一个源颜色已经乘以了一个alpha值，通过消除每个颜色分量的多余乘法运算，预乘可以加快图像的渲染速度。
• 样本的数据格式 - 整数或浮点值。

从上图我们可以看到位图布局信息的作用，像素格式用来描述像素的组成，位图布局信息则用来描述像素分量的排列顺序。

三、取色器的实现

了解了这些我们终于可以开始正式的编码了，我们分两步来做

1、把要取色的图片转换成位图

- (CGContextRef) createRGBABitmapContext:(CGImageRef) image{
    
    size_t imageWidth = CGImageGetWidth(image);
    size_t imageHeight = CGImageGetHeight(image);
    //使用设备颜色空间，和mac OS不同，iOS只能使用设备相关颜色空间
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    //位图布局信息
    CGImageAlphaInfo bitmapInfo = kCGImageAlphaPremultipliedFirst;
    //创建位图上下文
    CGContextRef context = CGBitmapContextCreate(NULL, imageWidth, imageHeight, 8, 0, colorSpace, bitmapInfo);
    //绘制bitmap到上下文中
    CGContextDrawImage(context, CGRectMake(0, 0, imageWidth, imageHeight), image);
    if (context == NULL){
        printf("Context not created!");
    }
    
    CGColorSpaceRelease(colorSpace);
    
    return context;
}

2、取出位图中的像素数据

#pragma mark - 获取触摸图片的位置
- (void) touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch * touch = touches.anyObject;
    CGPoint currentP = [touch locationInView:self.imageView];
    
    UIColor * color = [[JMColorPicker colorPicker] pickerColorInPoint:currentP fromImage:self.imageView.image size:self.imageView.frame.size];
    self.showColorView.backgroundColor = color;
    
    const CGFloat * colorString = CGColorGetComponents(color.CGColor);
    self.colorLabel.text = [NSString stringWithFormat:@"R:%.1f\n G:%.1f\n B:%.1f\n", colorString[0] * 255, colorString[1] * 255, colorString[2] * 255];
}
#pragma mark - 从一个点取颜色
- (UIColor *) pickerColorInPoint:(CGPoint) point fromImage:(UIImage *) image size:(CGSize) imageViewSize{

    CGImageRef cgImage = image.CGImage;
    if (!self.context) {
        self.context = [self createRGBABitmapContext:cgImage];
    }
    
    if (self.context == NULL) {
        return nil;
    }
    
    size_t w = CGImageGetWidth(cgImage);
    size_t h = CGImageGetHeight(cgImage);
    //传入imageView的size主要是为了得到当前坐标在位图上下文上的坐标
    CGPoint finalPoint = CGPointMake(point.x / imageViewSize.width * w, point.y / imageViewSize.height * h);
    
    UIColor * color = nil;
    unsigned char * data = CGBitmapContextGetData(self.context);
    if (data != NULL) {
        //我们选用的颜色空间为RGB，像素格式为32bpp，8bpc，别忘了每个像素占4个字节，由此可以计算出当前触摸点在data数组中的位置
        int offset = 4 * ((w * round(finalPoint.y)) + round(finalPoint.x));
        int alpha =  data[offset];
        int red = data[offset + 1];
        int green = data[offset + 2];
        int blue = data[offset + 3];
        NSLog(@"offset: %i colors: RGB A %i %i %i  %i", offset, red, green, blue, alpha);
        color = [UIColor colorWithRed:(red / 255.0f) green:(green / 255.0f) blue:(blue / 255.0f) alpha:(alpha / 255.0f)];
    }
    
    return color;
}

效果图
关于BMP图像数据格式请看这篇文章 BMP图像数据格式详解（侵删）

总结：

清明节之前这篇文章已经编辑了一大半，就剩最后的代码没上，刚才加完班回来把代码给补上了，关于里面各个函数以及位图的图像数据格式更详细的介绍，我会抽个时间补上，代码我在整理一下也会放在GitHub上。

PS：不是我懒，是因为最近项目排期很紧！ಥ_ಥ又要回去画界面了...