iOS給圖片添加濾鏡&使用openGLES動態渲染圖片

給圖片增長濾鏡有這兩種方式: CoreImage / openGLES

 

下面先說明如何使用CoreImage給圖片添加濾鏡, 主要爲如下步驟:

#1.導入CIImage格式的原始圖片

#2.建立CIFilter濾鏡

#3.用CIContext將濾鏡中的圖片渲染出來

#4.導出渲染後的圖片

參考代碼:

 1 　　//導入CIImage
 2     CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
 3     
 4     //建立出Filter濾鏡
 5     CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
 6     
 7     [filter setValue:ciImage forKey:kCIInputImageKey];
 8     
 9     [filter setDefaults];
10     
11     CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
12     
13     //用CIContext將濾鏡中的圖片渲染出來
14     CIContext *context = [CIContext contextWithOptions:nil];
15     
16     CGImageRef cgImage = [context createCGImage:outImage
17                                        fromRect:[outImage extent]];
18     
19     //導出圖片
20     UIImage *showImage = [UIImage imageWithCGImage:cgImage];
21     
22     CGImageRelease(cgImage);
23     
24     UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
25     imageView.center       = self.view.center;
26     [self.view addSubview:imageView];

濾鏡有哪些可選能夠參看如下文章:http://www.jianshu.com/p/3e2cca585ccc

 

當要設置多個濾鏡的時候, 出了新建立一個CIFilter外還要額外設定kCIInputAngleKey, 代碼以下:

 1 //導入CIImage
 2     CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
 3     
 4     //建立出Filter濾鏡
 5     CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
 6     
 7     [filter setValue:ciImage forKey:kCIInputImageKey];
 8     
 9     [filter setDefaults];
10     
11     CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
12     
13     CIFilter *filterTwo = [CIFilter filterWithName:@"CIHueAdjust"];
14     
15     [filterTwo setValue:outImage forKey:kCIInputImageKey];
16     
17     [filterTwo setDefaults];
18     
19     [filterTwo setValue:@(1.0f) forKey:kCIInputAngleKey]; //若是不增長這行新增的濾鏡不會生效
20     
21     CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
22     
23     //用CIContext將濾鏡中的圖片渲染出來
24     CIContext *context = [CIContext contextWithOptions:nil]; 
25     
26     CGImageRef cgImage = [context createCGImage:outputImage
27                                        fromRect:[outputImage extent]];
28     
29     //導出圖片
30     UIImage *showImage = [UIImage imageWithCGImage:cgImage];
31     
32     CGImageRelease(cgImage);
33     
34     UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
35     imageView.center       = self.view.center;
36     [self.view addSubview:imageView];

 

下面來介紹怎麼用openGLES來使用濾鏡渲染圖片

使用openGlES的步驟大體以下:

#1.導入要渲染的圖片

#2.獲取OpenGLES渲染的上下文

#3.建立出渲染的GLKView buffer

#4.建立CoreImage的上下文

#5.進行CoreImage的相關設置

#6.開始渲染並顯示圖片

參考代碼以下:

 1 //導入要渲染的圖片
 2     UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
 3     CGRect rect        = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
 4     
 5     //獲取OpenGLES渲染的上下文
 6     EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
 7     
 8     //建立出渲染的buffer
 9     GLKView *glkView = [[GLKView alloc] initWithFrame:rect
10                                               context:eagContext];
11     [glkView bindDrawable];
12     [self.view addSubview:glkView];
13     
14     //建立出CoreImage的上下文
15     CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext
16                                                      options:@{kCIContextWorkingColorSpace: [NSNull null]}];
17     
18     //CoreImage相關設置
19     CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
20     
21     CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
22     
23     [filter setValue:ciImage forKey:kCIInputImageKey];
24     [filter setValue:@(0) forKey:kCIInputIntensityKey];
25     
26     //開始渲染
27     [ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
28                   inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
29                 fromRect:[ciImage extent]];
30     
31     [glkView display];

 

若是要動態渲染, 能夠經過UISilder動態調整一下代碼的vaule值

[filter setValue:vaule forKey:kCIInputIntensityKey];