Image Processing in iOS Part1:Ra

2016-04-19 本文已影响207人董二千

通过图片处理我们可以实现很多很炫的效果，比如，修改图片颜色，混合图片等。
在这两篇教程里，我们首先了解一下基本的图片处理过程。然后做一个简单的app，实现一个幽灵图片的过滤，利用下面四个目前比较流行的方法。
1.修改原生的位图
2.使用Core Graphics库
3.使用Core Image库
4.使用第三方的GPUImage库
在这篇教程中我们把主要把精力放在处理原生位图上面。一旦你理解了基础的处理过程，你将会知道其他库是怎么工作的。在第二篇教程中，你会学习另外三种方法。
这篇教程假设你已经对iOS和Objective-C有了一个基本的了解。

Getting Started

在你编码前，我们需要对图片处理的几个概念有一个大概的理解。所以，坐下来，放松。倾听（吸收）这段短暂而痛苦的关于图片原理的讨论。
先要做的事是见一见你的新朋友，他将会陪伴你渡过这篇教程，他就是...Ghosty(幽灵)

ghost-250x250.png
现在，别害怕，这不是一个真的幽灵。事实上，它是一张图片。当你把他下载下来会发现，它只是一串0和1的组合。
什么是图片
图片是像素的集合。每个像素是一个单一的特定的颜色。
图片（像素）通常作为一个数组被排列。你能把它想象成二维数组。下面是Ghosty的压缩版

ghost_tiny.png

图片中的每一个方块都是像素，而且每个像素仅仅代表一个颜色。当成百上千个图片在一起，它就变成了一个数字的图片。

在内存中字节是如何代表颜色的
字节有许多方法可以代替颜色。在这篇教程中我们用最简单的原理：32-bit RGBA
正如它名字所描述的，32位RGBA存储一个颜色需要32位（bit）或者4字节（bytes），每个字节存储一个通道。这里有四个通道：

红的的R
绿色的G
蓝色的B
阿尔法通道A

你可能已经知道了，红绿蓝是数字格式的一组基本颜色。你可以用它们来合成任何颜色。
因为每个通道8bit，你使用32位RGBA中的RGB的不同值创建的不透明颜色的总数是256256256，大约是1700百万的颜色，这是一个多么大的数字啊。
alpha通道和其他的有很大的不同，你可以认为它是描述透明度的，就像UIView中的alpha属性。
你将会深入理解当你学习到下面混合相关的部分时。
已经得出了这个结论，图片是像素的集合，每个像素被编码来展示一种颜色。

你是不是对位图的方向感到迷惑，一个位图就像是一个二维像素的地图。

现在你知道我们使用字节来代表颜色。但是在编码前，还有三个概念需要我们了解。

color space 色彩空间

用RGB的方法代表颜色是颜色空间使用的一个列子。它只是许多方法中的一种。另外一个色彩空间是grayscale。
正如它名字所描述的，所有的图片在grayscale色彩空间中都是黑色和白色。你只需要保存一个值来描述颜色。
一个有渐变色的RGB图对人们来说不是能直接从数字里看出来的。
例如，你认为[0,104,55]是什么颜色，你可能认为是天蓝色，那你就大错特错了。是深绿色

DarkGreen.jpg

另外两个色彩空间是HSV和YUV。（这两我就不翻译了，一般用不到，有兴趣的同学自己看咯）。

Coordinate Systems 坐标系统

既然图片是2D的像素图片，那么它就有方向。通常它的左上角是原点，沿着Y轴向下的方向。或者左下角是原点，沿着Y轴向上的方向。
这两个都适用，苹果在不同的地方用到了这两种方法。
目前，图片和UIView使用左上角作为原点，Core Image 和Core Graphics使用左下角作为原点。记住这点很重要，你以后可能会遇到类似的bug。

Image Compression 图片压缩

这是在编码前的最后一个概念了。每个像素被分别存储在内存中，如果你计算一个8兆像素的图片，它将会占用8*10^6pixels
*4bytes/pixel = 32兆字节，来存储。这是很大的，所以JPEG、PNG等其他图片在展示的时候都会有一个压缩。
当GPU渲染图片的时候，它们解压图片到它们原始的大小，这是很耗内存的。如果你的app占用了太多的内存。它可能被iOS终止。

像素

现在你对图片的内部原理有了一个基础的了解，你可以开始编码了。今天你要写一个可以自拍的app叫做SpookCam，这个app在你的自拍像上面放了一个Ghosty。
初始项目在这里下载,打开项目运行你将会看到下面的

screenshot2-ghosty1.png

控制台输出：

Screenshot1-pixel-output-700x410.png
当前展示的是一个简易版，把Ghosty转化到像素缓冲区域，并且打印出每个像素明亮的部分。
什么是明亮的部分呢，就是RGB的平均值。看起来很整洁吧。
现在，浏览一下code。你将会注意到ViewController.m使用UIImagePickerController来从相册里面选图片，或者拍照。
选完图片之后，调用-setupWithImage:到这里输出了每个像素的明亮值。定位到logPixelsOfimage;在ViewController.m里面重温第一部分的方法：

// 
1.CGImageRef inputCGImage = [image CGImage];
NSUInteger width = CGImageGetWidth(inputCGImage);
NSUInteger height = CGImageGetHeight(inputCGImage); 
// 
2.NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * width;
NSUInteger bitsPerComponent = 8;
 UInt32 * pixels;pixels = (UInt32 *) [calloc](height * width, [sizeof](UInt32)); 
// 
3.CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixels, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); 
// 
4.CGContextDrawImage(context, CGRectMake(0, 0, width, height), inputCGImage); 
// 
5.Cleanup
CGColorSpaceRelease(colorSpace);
CGContextRelease(context);

现在一步一步来看：
1.把UIImage转化成CGImage对象，这需要Core Graphics中的方法来实现。同时得到图片的width和height。
2.因为我们在32bitRGB环境下工作，你硬编码参数bytesPerPixel和bitsPerComponent，然后计算图片的 bytesPerRow。最终你分配你一个像素数组来存储像素数据。
3.创建一个RGBCGColorSpace和一个CGBitmapContext，传入一个像素像素指针作为缓存区，来存储像素数据，被content锁持有。你将会对Core Graphics有一个更深入的了解，同过下面的学习。
4.在context上面画一个输出的图片。当context被创建的时候，用你指定的格式来格式化过的图片像素数据，存放在pixels
5.清空colorspace和context

注意当你展示一个图片时，设备的GPU解码被编码的图片，出现在屏幕上。为了访问本地的数据你需要一个像素的拷贝，就像你上面做的。

pixels持有图片所有的原始像素。下面的几行迭代打印了明亮值。

//1.
#define Mask8(x) ( (x) & 0xFF )
#define R(x) ( Mask8(x) )
#define G(x) ( Mask8(x >> 8 ) )
#define B(x) ( Mask8(x >> 16) ) 
NSLog(@"Brightness of image:");
// 2.
UInt32 * currentPixel = pixels;
for (NSUInteger j = 0; j < height; j++) {
 for (NSUInteger i = 0; i < width; i++) {
 // 3. 
UInt32 color = *currentPixel; 
printf("%3.0f ", (R(color)+G(color)+B(color))/3.0); 
// 4. 
currentPixel++; 
} 
printf("\n");
}

1.定义一个宏，来简化处理像素的任务。为了访问红色通道，你计算前8个位。为了访问其他通道，我们执行一个位移每次位移8位来访问。
2.获得第一个像素的指针。循环访问其他像素。一次访问一个从0-width*height个，这就很简单能解释为什么图片是两维的了。
3.通过重新引用currentPixel来得到当前像素的颜色。然后打印明亮的像素。
4.currentPixel加1，来移动到下一个像素。如果你对这个算法感到生疏了，记住一点：因为currentPixel是一个指向UInt32的指针，当你的指针加1之后，它就移动了4bytes（32-bits）,把你带到下一个像素。

到这里，我们简单的打印出了原始图片的数据，还没有修改任何东西。接下来我们开始改动代码了。

SpookCam --原始位图的修改

实现这个效果有四种方法，但是我们只集中精力在其中一种方发上面，因为它涉及了图片处理的first principles。掌握这个方法将会让你明白其他库的工作原理。

在这个方法里，你将会遍历每个pixel，因为初始的项目已经做了这个。但是是时候为它赋新的值了。

正如你在starter app看到的，ImageProcessor类已经存在。把它导入ViewController,用-setupWithImage:代替ViewController里下面的的code：

- (void)setupWithImage:(UIImage*)image { 
UIImage * fixedImage = [image imageWithFixedOrientation]; 
self.workingImage = fixedImage;  
// Commence with processing!
[ImageProcessor sharedProcessor].delegate = self; 
[[ImageProcessor sharedProcessor] processImage:fixedImage];
}

注释掉-viewDidLoad里下面的code

// [self setupWithImage:[UIImage imageNamed:@"ghost_tiny.png"]];

现在看一下ImageProcessor.m文件。正如你看到的ImageProcessor是一个单例对象，invoking了-processUsingPixels这个方法，一个入参image，通过delegate返回了一个image。

-processUsingPixels是你之前看到的code的copy，它允许你方法入参图片的像素。注意两个新的宏A(x)和RGBAMake(r,g,b,a)。
build，run，从你的相册里面选择一张图片或者拍一张图片。你将会看到那张图片像这样：

BuildnRun-1.png

那个人看起来很放松，是时候让Ghosty出现了！
在-processUsingPixels return之前，添加下面的code得到一个CGImageRef 的ghosty。

UIImage * ghostImage = [UIImage imageNamed:@"ghost"];
CGImageRef ghostCGImage = [ghostImage CGImage];

现在计算出你的ghosty在图片上的rect

CGFloat ghostImageAspectRatio = ghostImage.size.width / ghostImage.size.height;
NSInteger targetGhostWidth = inputWidth * 0.25;
CGSize ghostSize = CGSizeMake(targetGhostWidth, targetGhostWidth / ghostImageAspectRatio);
CGPoint ghostOrigin = CGPointMake(inputWidth * 0.5, inputHeight * 0.2);

上面的code重新设置了Ghosty的width只占用了原图片的25%，并把它放在它自己的左上角。
下一步得到ghosty的缓存区

NSUInteger ghostBytesPerRow = bytesPerPixel * ghostSize.width;
UInt32 * ghostPixels = (UInt32 *)calloc(ghostSize.width * ghostSize.height, sizeofUInt32));
CGContextRef ghostContext = CGBitmapContextCreate(ghostPixels, ghostSize.width, ghostSize.height, bitsPerComponent, ghostBytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGContextDrawImage(ghostContext, CGRectMake(0, 0, ghostSize.width, ghostSize.height),ghostCGImage);

这个如何从入参图片获得pixels是相似的。但是，通过将ghosty画到一个较小的尺寸，让它变得更小了。
现在你已经把ghosty混合到你的图片里了。时候来来复习一下blending了。

Blending像上面所提到的，每个颜色都有阿尔法值来指示了一个透明度。但是当你创建图片的时候，每个像素都已经是一个明确的颜色了。
所以如何把一个像素混合到已经有背景色和半透明颜色的图片上呢？
问题的答案就是alpha blending。这里我们创建了一个float类型的通道在0-1之间。

NewColor = TopColor * TopColor.Alpha + BottomColor * (1 - TopColor.Alpha)

它是一个标准的线性关系。

当TopColor.Alpha是1的时候newColor是等于TopColor。
当TopColor.alpha是0的时候newColor是等于BottomColor。
最后，当TopColor.Alpha在0-1之间的时候，newColor是TopColor和BottomColor的混合值。

好，现在回到Ghosty。
和大多数位图处理的算法一样，你需要遍历所有的像素。但是不同点是，你只需要遍历你需要改变的像素。
添加下面的code到processUsingPixels:方法下面

NSUInteger offsetPixelCountForInput = ghostOrigin.y * inputWidth + ghostOrigin.x;
for (NSUInteger j = 0; j < ghostSize.height; j++) {
 for (NSUInteger i = 0; i < ghostSize.width; i++) {
   UInt32 * inputPixel = inputPixels + j * inputWidth + i + offsetPixelCountForInput; 
    UInt32 inputColor = *inputPixel; 
    UInt32 * ghostPixel = ghostPixels + j * (int)ghostSize.width + i;
    UInt32 ghostColor = *ghostPixel; 
 // Do some processing here  
}
}

注意你只需要遍历在ghosty图片中的像素。通过offsetPixelCountForInput来偏移入参图片。记住虽然你的图片是二维数组，但是在内存中还是一维数组。

接下来，在注释** Do some processing here**下面添加如下code，来完成真正的混合

// Blend the ghost with 50% alpha
CGFloat ghostAlpha = 0.5f * (A(ghostColor) / 255.0);
UInt32 newR = R(inputColor) * (1 - ghostAlpha) + R(ghostColor) * ghostAlpha;
UInt32 newG = G(inputColor) * (1 - ghostAlpha) + G(ghostColor) * ghostAlpha;
UInt32 newB = B(inputColor) * (1 - ghostAlpha) + B(ghostColor) * ghostAlpha; 
// Clamp, not really useful here :p
newR = MAX(0,MIN(255, newR));
newG = MAX(0,MIN(255, newG));
newB = MAX(0,MIN(255, newB)); 
*inputPixel = RGBAMake(newR, newG, newB, A(inputColor));

在这部分有两点需要注意
1.通过让每个像素的alpha乘以0.5来实现50%的透明度，混合公式就是我们上面所提到的。
2.每个颜色的范围是[0-255],在这里是不需要的，因为这个值从来没有超过边界。但是大多数算法需要防护一下，防止颜色值溢出。

为了测试code，将下面的code添加到processUsingPixels下面，然后当前的图片。

// Create a new UIImage
CGImageRef newCGImage = CGBitmapContextCreateImage(context);
UIImage * processedImage = [UIImage imageWithCGImage:newCGImage];
 return processedImage;

这就从context创建了一个新的图片。你可以先忽略它的内存问题。
build ，run,你可以看到下面的图片:

BuildnRun-2.png

完美运行了。
原文地址