iOS Add Filter to Picture Using openGLES Dynamic Rendering Picture Details and Examples
- 2021-06-28 14:15:05
- OfStack
iOS Add Filters to Pictures & Render pictures dynamically using openGLES
There are two ways to add a filter to a picture: CoreImage / openGLES
The following steps explain how to use CoreImage to add a filter to a picture:
#1. Import the original picture in CIImage format
#2. Create CIFilter filters
Render #3. Render the image in the filter with CIContext
Render #4. Export rendered pictures
Reference code:
// Import CIImage
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
// Create Filter Filters
CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
[filter setValue:ciImage forKey:kCIInputImageKey];
[filter setDefaults];
CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
// use CIContext Render pictures in filters
CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef cgImage = [context createCGImage:outImage
fromRect:[outImage extent]];
// Export Pictures
UIImage *showImage = [UIImage imageWithCGImage:cgImage];
CGImageRelease(cgImage);
UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
imageView.center = self.view.center;
[self.view addSubview:imageView];
When multiple filters are set, an extra kCIInputAngleKey is added to the new CIFilter.
// Import CIImage
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
// Create Filter Filters
CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
[filter setValue:ciImage forKey:kCIInputImageKey];
[filter setDefaults];
CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
CIFilter *filterTwo = [CIFilter filterWithName:@"CIHueAdjust"];
[filterTwo setValue:outImage forKey:kCIInputImageKey];
[filterTwo setDefaults];
[filterTwo setValue:@(1.0f) forKey:kCIInputAngleKey]; // If you don't add this new line of filters, they won't work
CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
// use CIContext Render pictures in filters
CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef cgImage = [context createCGImage:outputImage
fromRect:[outputImage extent]];
// Export Pictures
UIImage *showImage = [UIImage imageWithCGImage:cgImage];
CGImageRelease(cgImage);
UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
imageView.center = self.view.center;
[self.view addSubview:imageView];
Here's how to use openGLES to render pictures using filters
The steps for using openGlES are as follows:
Render #1. Import pictures to render
Rendering #2. Get context for OpenGLES rendering
Render #3. Create Rendered GLKView buffer
#4. Create context for CoreImage
#5. Set up CoreImage
Render #6. Start rendering and display pictures
The reference code is as follows:
// Import pictures to render
UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
CGRect rect = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
// Obtain OpenGLES Rendered Context
EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
// Create rendered buffer
GLKView *glkView = [[GLKView alloc] initWithFrame:rect
context:eagContext];
[glkView bindDrawable];
[self.view addSubview:glkView];
// Create CoreImage Context
CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext
options:@{kCIContextWorkingColorSpace: [NSNull null]}];
//CoreImage Related Settings
CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
[filter setValue:ciImage forKey:kCIInputImageKey];
[filter setValue:@(0) forKey:kCIInputIntensityKey];
// Start Rendering
[ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
fromRect:[ciImage extent]];
[glkView display];
If you want to render dynamically, you can adjust the vaule value of the code under 1 dynamically by UISilder
[filter setValue:vaule forKey:kCIInputIntensityKey];
Thank you for reading, I hope to help you, thank you for your support on this site!