Iphone之选择图片滤镜功能的实现

来源：互联网发布：dem地球软件编辑：程序博客网时间：2024/06/08 05:59

本文固定链接: http://www.zhouxiaodong.net/?p=66 | 忧郁小洞洞的站

Iphone之选择图片滤镜功能的实现

首先大家在做关于自拍软件的时候，会涉及到这样的功能，就是说给图片加滤镜，比如黑白，复古等效果，来使照片显示不同的效果。下面代码，就是如何实现了这一功能，当然，你可以加上你自己的效果，

个实现的效果如图：

[cpp] view plaincopy
#import <UIKit/UIKit.h>  
#import <QuartzCore/QuartzCore.h>  
   
@interface PhotoSelectViewController : UIViewController  
{  
   
IBOutlet UIImageView *imageView;//图片  
   
IBOutlet UIScrollView *scrollerView;//滚动视图显示所有滤镜图片  
   
UIImage *theImage;//原始图片  
   
int selectIndex;//选择的第几个图片  
}  
@end  

[cpp] view plaincopy
/******各种颜色的设定*******/  
//LOMO  
const float colormatrix_lomo[] = {  
1.7f,  0.1f, 0.1f, 0, -73.1f,  
0,  1.7f, 0.1f, 0, -73.1f,  
0,  0.1f, 1.6f, 0, -73.1f,  
0,  0, 0, 1.0f, 0 };  
   
//黑白  
const float colormatrix_heibai[] = {  
0.8f,  1.6f, 0.2f, 0, -163.9f,  
0.8f,  1.6f, 0.2f, 0, -163.9f,  
0.8f,  1.6f, 0.2f, 0, -163.9f,  
0,  0, 0, 1.0f, 0 };  
//复古  
const float colormatrix_huajiu[] = {  
0.2f,0.5f, 0.1f, 0, 40.8f,  
0.2f, 0.5f, 0.1f, 0, 40.8f,  
0.2f,0.5f, 0.1f, 0, 40.8f,  
0, 0, 0, 1, 0 };  
   
//哥特  
const float colormatrix_gete[] = {  
1.9f,-0.3f, -0.2f, 0,-87.0f,  
-0.2f, 1.7f, -0.1f, 0, -87.0f,  
-0.1f,-0.6f, 2.0f, 0, -87.0f,  
0, 0, 0, 1.0f, 0 };  
   
//锐化  
const float colormatrix_ruise[] = {  
4.8f,-1.0f, -0.1f, 0,-388.4f,  
-0.5f,4.4f, -0.1f, 0,-388.4f,  
-0.5f,-1.0f, 5.2f, 0,-388.4f,  
0, 0, 0, 1.0f, 0 };  
   
//淡雅  
const float colormatrix_danya[] = {  
0.6f,0.3f, 0.1f, 0,73.3f,  
0.2f,0.7f, 0.1f, 0,73.3f,  
0.2f,0.3f, 0.4f, 0,73.3f,  
0, 0, 0, 1.0f, 0 };  
   
//酒红  
const float colormatrix_jiuhong[] = {  
1.2f,0.0f, 0.0f, 0.0f,0.0f,  
0.0f,0.9f, 0.0f, 0.0f,0.0f,  
0.0f,0.0f, 0.8f, 0.0f,0.0f,  
0, 0, 0, 1.0f, 0 };  
   
//清宁  
const float colormatrix_qingning[] = {  
0.9f, 0, 0, 0, 0,  
0, 1.1f,0, 0, 0,  
0, 0, 0.9f, 0, 0,  
0, 0, 0, 1.0f, 0 };  
   
//浪漫  
const float colormatrix_langman[] = {  
0.9f, 0, 0, 0, 63.0f,  
0, 0.9f,0, 0, 63.0f,  
0, 0, 0.9f, 0, 63.0f,  
0, 0, 0, 1.0f, 0 };  
   
//光晕  
const float colormatrix_guangyun[] = {  
0.9f, 0, 0,  0, 64.9f,  
0, 0.9f,0,  0, 64.9f,  
0, 0, 0.9f,  0, 64.9f,  
0, 0, 0, 1.0f, 0 };  
   
//蓝调  
const float colormatrix_landiao[] = {  
2.1f, -1.4f, 0.6f, 0.0f, -31.0f,  
-0.3f, 2.0f, -0.3f, 0.0f, -31.0f,  
-1.1f, -0.2f, 2.6f, 0.0f, -31.0f,  
0.0f, 0.0f, 0.0f, 1.0f, 0.0f  
};  
   
//梦幻  
const float colormatrix_menghuan[] = {  
0.8f, 0.3f, 0.1f, 0.0f, 46.5f,  
0.1f, 0.9f, 0.0f, 0.0f, 46.5f,  
0.1f, 0.3f, 0.7f, 0.0f, 46.5f,  
0.0f, 0.0f, 0.0f, 1.0f, 0.0f  
};  
   
//夜色  
const float colormatrix_yese[] = {  
1.0f, 0.0f, 0.0f, 0.0f, -66.6f,  
0.0f, 1.1f, 0.0f, 0.0f, -66.6f,  
0.0f, 0.0f, 1.0f, 0.0f, -66.6f,  
0.0f, 0.0f, 0.0f, 1.0f, 0.0f  
};  
   
#import "PhotoSelectViewController.h"  
   
@interface PhotoSelectViewController ()  
   
@end  
   
@implementation PhotoSelectViewController  
   
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
{  
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
if (self) {  
// Custom initialization  
}  
return self;  
}  
   
- (void)viewDidLoad  
{  
[super viewDidLoad];  
   
theImage = [UIImage imageNamed:@"photo.png"];  
imageView.image = theImage;  
   
//添加滤镜  
NSArray *arr = [NSArray arrayWithObjects:@"原图",@"LOMO",@"黑白",@"复古",@"哥特",@"锐色",@"淡雅",@"酒红",@"青柠",@"浪漫",@"光晕",@"蓝调",@"梦幻",@"夜色", nil];  
//设置滚动视频的属性  
scrollerView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];  
scrollerView.indicatorStyle = UIScrollViewIndicatorStyleBlack;  
scrollerView.showsHorizontalScrollIndicator = NO;  
scrollerView.showsVerticalScrollIndicator = NO;//关闭纵向滚动条  
scrollerView.bounces = NO;  
   
//把所有的显示效果图添加到scrollerView里面  
float x ;//计算x坐标  
for(int i=0;i<arr.count;i++)  
{  
x = 5 + 51*i;  
//添加点击手势识别，来处理选择的图片  
UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(setImageStyle:)];  
recognizer.numberOfTouchesRequired = 1;  
recognizer.numberOfTapsRequired = 1;  
   
//添加名字标签  
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(x, 53, 40, 23)];  
[label setBackgroundColor:[UIColor clearColor]];  
[label setText:[arr objectAtIndex:i]];  
[label setTextAlignment:NSTextAlignmentCenter];  
[label setFont:[UIFont systemFontOfSize:13.0f]];  
[label setTextColor:[UIColor whiteColor]];  
[label setUserInteractionEnabled:YES];  
[label setTag:i];  
   
[scrollerView addSubview:label];  
   
//添加效果图片  
int tag = i+1000;  
UIImageView *bgImageView = [[UIImageView alloc]initWithFrame:CGRectMake(x, 10, 43, 43)];  
[bgImageView setTag:tag];  
[bgImageView addGestureRecognizer:recognizer];  
[bgImageView setUserInteractionEnabled:YES];  
UIImage *bgImage = [self changeImage:bgImageView.tag imageView:nil];  
bgImageView.image = bgImage;  
[scrollerView addSubview:bgImageView];  
[bgImageView setBackgroundColor:[UIColor redColor]];  
   
//导入 <QuartzCore/QuartzCore.h>  
//添加是否选中边框，选中时边框为黄色，默认是第一个被选中的  
if (i == 0) {  
   
CALayer * layer = [bgImageView layer];  
layer.borderColor = [[UIColor yellowColor] CGColor];  
layer.borderWidth = 1.0f;  
   
selectIndex = tag;  
}else{  
CALayer * layer = [bgImageView layer];  
layer.borderColor = [[UIColor blackColor] CGColor];  
layer.borderWidth = 1.0f;  
}  
   
}  
//设置滚动视图的实际大小  
scrollerView.contentSize = CGSizeMake(x + 55, 60);  
   
}  
//选择图片处理方法  
- (IBAction)setImageStyle:(UITapGestureRecognizer *)sender  
{  
//获取效果图  
UIImage *image =   [self changeImage:sender.view.tag imageView:nil];  
   
if (selectIndex != sender.view.tag) {  
//取消选择边框  
UIImageView *noselectImageView = (UIImageView*)[self.view viewWithTag:selectIndex];  
CALayer * nolayer = [noselectImageView layer];  
nolayer.borderColor = [[UIColor blackColor] CGColor];  
nolayer.borderWidth = 1.0f;  
   
selectIndex = sender.view.tag;  
UIImageView *selectImageView = (UIImageView*)[self.view viewWithTag:selectIndex];  
//添加选择边框  
CALayer * layer = [selectImageView layer];  
layer.borderColor = [[UIColor yellowColor] CGColor];  
layer.borderWidth = 1.0f;  
}  
   
//图片设置  
[imageView setImage:image];  
}  
   
//选择的效果图  
-(UIImage *)changeImage:(int)index imageView:(UIImageView *)imageView  
{  
UIImage *image;  
   
switch (index-1000) {  
case 0:  
{  
return theImage;  
}  
break;  
case 1:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_lomo];  
}  
break;  
case 2:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_heibai];  
}  
break;  
case 3:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_huajiu];  
}  
break;  
case 4:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_gete];  
}  
break;  
case 5:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_ruise];  
}  
break;  
case 6:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_danya];  
}  
break;  
case 7:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_jiuhong];  
}  
break;  
case 8:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_qingning];  
}  
break;  
case 9:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_langman];  
}  
break;  
case 10:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_guangyun];  
}  
break;  
case 11:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_landiao];  
   
}  
break;  
case 12:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_menghuan];  
   
}  
break;  
case 13:  
{  
image = [self imageWithImage:theImage withColorMatrix:colormatrix_yese];  
   
}  
}  
return image;  
}  
   
//效果图  
-(UIImage*)imageWithImage:(UIImage*)inImage withColorMatrix:(const float*) f  
{  
unsigned char *imgPixel = RequestImagePixelData(inImage);  
CGImageRef inImageRef = [inImage CGImage];  
GLuint w = CGImageGetWidth(inImageRef);  
GLuint h = CGImageGetHeight(inImageRef);  
   
int wOff = 0;  
int pixOff = 0;  
   
for(GLuint y = 0;y< h;y++)//双层循环按照长宽的像素个数迭代每个像素点  
{  
pixOff = wOff;  
   
for (GLuint x = 0; x<w; x++)  
{  
int red = (unsigned char)imgPixel[pixOff];  
int green = (unsigned char)imgPixel[pixOff+1];  
int blue = (unsigned char)imgPixel[pixOff+2];  
int alpha = (unsigned char)imgPixel[pixOff+3];  
changeRGBA(&red, &green, &blue, &alpha, f);  
   
//回写数据  
imgPixel[pixOff] = red;  
imgPixel[pixOff+1] = green;  
imgPixel[pixOff+2] = blue;  
imgPixel[pixOff+3] = alpha;  
   
pixOff += 4; //将数组的索引指向下四个元素  
}  
   
wOff += w * 4;  
}  
   
NSInteger dataLength = w * h * 4;  
   
//下面的代码创建要输出的图像的相关参数  
CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, imgPixel, dataLength, NULL);  
   
int bitsPerComponent = 8;  
int bitsPerPixel = 32;  
int bytesPerRow = 4 * w;  
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();  
CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;  
CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;  
   
CGImageRef imageRef = CGImageCreate(w, h, bitsPerComponent, bitsPerPixel, bytesPerRow,colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);//创建要输出的图像  
   
UIImage *myImage = [UIImage imageWithCGImage:imageRef];  
   
CFRelease(imageRef);  
CGColorSpaceRelease(colorSpaceRef);  
CGDataProviderRelease(provider);  
return myImage;  
}  
   
static CGContextRef CreateRGBABitmapContext (CGImageRef inImage)// 返回一个使用RGBA通道的位图上下文  
{  
CGContextRef context = NULL;  
CGColorSpaceRef colorSpace;  
void *bitmapData; //内存空间的指针，该内存空间的大小等于图像使用RGB通道所占用的字节数。  
int bitmapByteCount;  
int bitmapBytesPerRow;  
   
size_t pixelsWide = CGImageGetWidth(inImage); //获取横向的像素点的个数  
size_t pixelsHigh = CGImageGetHeight(inImage); //纵向  
   
bitmapBytesPerRow    = (pixelsWide * 4); //每一行的像素点占用的字节数，每个像素点的ARGB四个通道各占8个bit(0-255)的空间  
bitmapByteCount    = (bitmapBytesPerRow * pixelsHigh); //计算整张图占用的字节数  
   
colorSpace = CGColorSpaceCreateDeviceRGB();//创建依赖于设备的RGB通道  
   
bitmapData = malloc(bitmapByteCount); //分配足够容纳图片字节数的内存空间  
   
context = CGBitmapContextCreate (bitmapData, pixelsWide, pixelsHigh, 8, bitmapBytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);  
//创建CoreGraphic的图形上下文，该上下文描述了bitmaData指向的内存空间需要绘制的图像的一些绘制参数  
   
CGColorSpaceRelease( colorSpace );  
//Core Foundation中通过含有Create、Alloc的方法名字创建的指针，需要使用CFRelease()函数释放  
   
return context;  
}  
   
static unsigned char *RequestImagePixelData(UIImage *inImage)  
// 返回一个指针，该指针指向一个数组，数组中的每四个元素都是图像上的一个像素点的RGBA的数值(0-255)，用无符号的char是因为它正好的取值范围就是0-255  
{  
CGImageRef img = [inImage CGImage];  
CGSize size = [inImage size];  
   
CGContextRef cgctx = CreateRGBABitmapContext(img); //使用上面的函数创建上下文  
   
CGRect rect = {{0,0},{size.width, size.height}};  
   
CGContextDrawImage(cgctx, rect, img); //将目标图像绘制到指定的上下文，实际为上下文内的bitmapData。  
unsigned char *data = CGBitmapContextGetData (cgctx);  
   
CGContextRelease(cgctx);//释放上面的函数创建的上下文  
return data;  
}  
   
static void changeRGBA(int *red,int *green,int *blue,int *alpha, const float* f)//修改RGB的值  
{  
int redV = *red;  
int greenV = *green;  
int blueV = *blue;  
int alphaV = *alpha;  
   
*red = f[0] * redV + f[1] * greenV + f[2] * blueV + f[3] * alphaV + f[4];  
*green = f[0+5] * redV + f[1+5] * greenV + f[2+5] * blueV + f[3+5] * alphaV + f[4+5];  
*blue = f[0+5*2] * redV + f[1+5*2] * greenV + f[2+5*2] * blueV + f[3+5*2] * alphaV + f[4+5*2];  
*alpha = f[0+5*3] * redV + f[1+5*3] * greenV + f[2+5*3] * blueV + f[3+5*3] * alphaV + f[4+5*3];  
   
if (*red > 255)  
{  
*red = 255;  
}  
if(*red < 0)  
{  
*red = 0;  
}  
if (*green > 255)  
{  
*green = 255;  
}  
if (*green < 0)  
{  
*green = 0;  
}  
if (*blue > 255)  
{  
*blue = 255;  
}  
if (*blue < 0)  
{  
*blue = 0;  
}  
if (*alpha > 255)  
{  
*alpha = 255;  
}  
if (*alpha < 0)  
{  
*alpha = 0;  
}  
}  
   
- (void)didReceiveMemoryWarning  
{  
[super didReceiveMemoryWarning];  
// Dispose of any resources that can be recreated.  
}  
   
- (void)viewDidUnload {  
imageView = nil;  
scrollerView = nil;  
[super viewDidUnload];  
}  
@end  

另注意，我用了xib，所以imageView和scrollView都是关联上的。

再附上一个自己拍的原图，大家来欣赏！

0 0