目前好多APP都具备滤镜美颜效果功能，作为iOS开发者，多少也要懂一点图片的处理效果，本文章只是简单介绍基本的滤镜效果：
一、图片储存原理
要对图片进行修改，那首先就要了解他的储存原理，在iOS开发中接触最多的主要的图片格式：jpg、png、webp，不管是什么格式的图片，可以看成是一个个像素点构成，这一个个点就是RGBA（jpg格式没有A通道）。当我们储存图片时，系统都会有对应的一个缓冲池(buffer)进行存储，buffer装载的信息大致可以分为两个部分：
一个是Info，这个是图片的描述信息，
另外一个就是Data，这里面就是图片数据信息，但是这不是最原始的RGB数据，而是经过压缩编码后的数据，我们要修改的也是这个数据。
简单画个图理解下：
buffer
二、滤镜效果
实现滤镜效果的步骤：
1、将UIImage转化为Data数据
2、Data数据进行灰度、色彩、美白等处理
3、将处理后的Data数据载转化回UIImage
根据以上三步，做如下操作：
1、将UIImage转化为Data数据
这里需要介绍一个方法，参数说明详见
//Bitmap上下文（位图结构）
CGBitmapContextCreate(<#void * _Nullable data#>, <#size_t width#>, <#size_t height#>, <#size_t bitsPerComponent#>, <#size_t bytesPerRow#>, <#CGColorSpaceRef _Nullable space#>, <#uint32_t bitmapInfo#>)
//image ---> data
- (unsigned char*)p_imageToData:(UIImage *)image {
//使用的是框架是CoreGraphics，所以要把image ——> CGImage
CGImageRef imageRef = [image CGImage];
CGSize imageSize = image.size;
//颜色空间
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
//分配bit级空间大小，一个像素点分为 R G B A 为4byte，像素点个数 = 宽*高
void *data = malloc(4*imageSize.width*imageSize.height);
//Bitmap上下文
//kCGImageAlphaPremultipliedLast 当前颜色的排列顺序
//kCGBitmapByteOrder32Big 位数 4*8
CGContextRef context = CGBitmapContextCreate(data, imageSize.width, imageSize.height, 8, 4*imageSize.width, colorSpaceRef, kCGBitmapByteOrder32Big | kCGImageAlphaPremultipliedLast);
//渲染
//参数1：bitmap上下文
//参数2：需要渲染的空间大小
//参数3：原始图片
CGContextDrawImage(context, CGRectMake(0, 0, imageSize.width, imageSize.height), imageRef);
//释放
CGColorSpaceRelease(colorSpaceRef);
CGContextRelease(context);
return (unsigned char*)data;
}
2、Data数据进行灰度、色彩、美白等处理
a、灰度处理
灰度颜色
上面几组颜色，他们的RGB值就是显示的对应的值，可见当RGB值都相等时，表现出来的都是灰色，只是程度不同而已。灰度处理也是这个原理，将像素点的RGB设置成相等的，这里提供一个灰度处理公式：
Gray = 0.299*Red +0.587*Green +0.114*Blue
- (unsigned char*)p_grayDataWithData:(unsigned char*)imageData imageSize:(CGSize)imageSize {
unsigned char* data = malloc(4*sizeof(unsigned char)*imageSize.width*imageSize.height);
//初始化data 内存
//参数1：内存地址
//参数2：填充的值
//参数3：需要填充的内存空间大小
memset(data, 0, 4*imageSize.width*imageSize.height);
for (int h = 0; h < imageSize.height; h++) {
for (int w = 0; w < imageSize.width; w++) {
//当前像素点的位置
unsigned int index = h*imageSize.width+w;
//取出原始的RGBA
//imageData+index*4: imageData地址加上偏移量（每个像素4byte）
unsigned char red = *(imageData+index*4);
unsigned char green = *(imageData+index*4+1);
unsigned char blue = *(imageData+index*4+2);
//灰度处理
unsigned int newRGB = red*0.299+green*0.587+blue*0.114;
//可能算出来的值大于255
newRGB = newRGB > 255? 255:newRGB;
memset(data+index*4, newRGB, 1);
memset(data+index*4+1, newRGB, 1);
memset(data+index*4+2, newRGB, 1);
}
}
return data;
}
上面代码提到的有关内存的，画了个简单的图帮助理解：
b、简单美白处理
本文采用映射表的方法处理美白效果，0-255之间有256个点，按每组32个，分8组，节点为55，110，155，185，225，240，250，255，然后再将段按照32等分分割，画个图说明下：
- (unsigned char*)p_skinWhiteWithData:(unsigned char*)imageData imageSize:(CGSize)imageSize {
void *data = malloc(4*imageSize.width*imageSize.height);
memset(data, 0, imageSize.width*imageSize.height);
NSArray *array = @[@"55",@"110",@"155",@"185",@"225",@"240",@"250",@"255"];
NSMutableArray *colorArray = [[NSMutableArray alloc] init];
int last = 0;//记录前一次的值，一开始为 0
for (int i = 0; i < 8; i++) {
int num = [array[i] intValue];
float step = (num - last)/32.0;//步长，每次增加多少
for (int j = 0; j < 32; j++) {
float newNum = last+step*j;//上一次的值加上步长*j 得到对应位置的值
NSString *newNumStr = [NSString stringWithFormat:@"%lf",newNum];
[colorArray addObject:newNumStr];
}
last = num;
}
for (int h = 0; h < imageSize.height; h++) {
for (int w = 0; w < imageSize.width; w++) {
unsigned int index = h*imageSize.width+w;
//取出原始的RGBA
unsigned int red = *(imageData+index*4);
unsigned int green = *(imageData+index*4+1);
unsigned int blue = *(imageData+index*4+2);
//美白处理
unsigned int newRed = [colorArray[red] floatValue];
unsigned int newGreen = [colorArray[green] floatValue];
unsigned int newBlue = [colorArray[blue] floatValue];
memset(data+index*4, newRed, 1);
memset(data+index*4+1, newGreen, 1);
memset(data+index*4+2, newBlue, 1);
}
}
return data;
}
c、彩色底版处理
同样给出一个处理彩色底版的算法：
newValue = 255 - oldValue
- (unsigned char*)p_colorDataWithData:(unsigned char*)imageData imageSize:(CGSize)imageSize {
unsigned char* data = malloc(4*sizeof(unsigned char)*imageSize.width*imageSize.height);
//初始化data 内存， 1：内存地址 2：填充的值 3：需要填充的内存空间大小
memset(data, 0, 4*imageSize.width*imageSize.height);
for (int h = 0; h < imageSize.height; h++) {
for (int w = 0; w < imageSize.width; w++) {
unsigned int index = h*imageSize.width+w;
//取出原始的RGBA
unsigned char red = *(imageData+index*4);
unsigned char green = *(imageData+index*4+1);
unsigned char blue = *(imageData+index*4+2);
//彩色处理
unsigned int newRed = 255-red;
unsigned int newGreen = 255-green;
unsigned int newBlue = 255-blue;
memset(data+index*4, newRed, 1);
memset(data+index*4+1, newGreen, 1);
memset(data+index*4+2, newBlue, 1);
}
}
return data;
}
3、将处理后的Data数据载转化回UIImage
- (UIImage *)p_dataToImage:(unsigned char*)imageData imageSize:(CGSize)imageSize {
//原始数据 4*imageSize.width*imageSize.height 数据空间大小
CGDataProviderRef dataProRef = CGDataProviderCreateWithData(NULL, imageData, 4*imageSize.width*imageSize.height, NULL);
CGImageRef imageRef = CGImageCreate(imageSize.width, imageSize.height, 8, 32, 4*imageSize.width, CGColorSpaceCreateDeviceRGB(), kCGBitmapByteOrderDefault, dataProRef, NULL, NO, kCGRenderingIntentDefault);
UIImage *imageNew = [UIImage imageWithCGImage:imageRef];
//释放
CFRelease(imageRef);
CGDataProviderRelease(dataProRef);
return imageNew;
}
四、结果
直接上效果图：
效果图
五、总结
以上是简单的处理效果，如果想要多样的处理效果就是计算新的RGB值的算法优化问题了，你们也可以随便改，会出现不同的效果呦。最后送上本Demo的链接地址：https://github.com/xyzcwb/ImageDemo
网友评论