Detailed explanation and examples of adding filters to images on iOS and using openGLES to dynamically render images

iOS adds filters to images and uses openGLES to dynamically render images

There are two ways to add filters to images: CoreImage / openGLES

　Here's how to use CoreImage to add filters to images, mainly the following steps:

#1.Import the original image in CIImage format

#2.Create CIFilter filter

#3.Render the image in the filter using CIContext

#4.Export the rendered image

Reference code:

//Import CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  //Create a Filter filter
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  //Render the image in the filter using CIContext
  CIContext *context = [CIContext contextWithOptions:nil];
  CGImageRef cgImage = [context createCGImage:outImage
                    fromRect:[outImage extent]];
  //Export the image
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

When setting multiple filters, in addition to creating a new CIFilter, you also need to set kCIInputAngleKey, as shown in the code below:

//Import CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
  //Create a Filter filter
  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 this line is not added, the new filter will not take effect.
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  //Render the image in the filter using CIContext
  CIContext *context = [CIContext contextWithOptions:nil]; 
  CGImageRef cgImage = [context createCGImage:outputImage
                    fromRect:[outputImage extent]];
  //Export the image
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

Next, let's introduce how to use OpenGLES to render images with filters

The steps to use openGlES are roughly as follows:

#1.Import the image to be rendered

#2.Get the context for OpenGLES rendering

#3.Create the GLKView buffer for rendering

#4.Create the context for CoreImage

#5.Perform related settings for CoreImage

#6.Start rendering and displaying the image

The reference code is as follows:

//Import the image to be rendered
  UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
  CGRect rect    = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
  //Get the context for OpenGLES rendering
  EAGLContext *2
  //Create the rendering buffer
  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [self.view addSubview:glkView];
  //Create the context for CoreImage
  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 of the code through UISilder

[filter setValue:vaule forKey:kCIInputIntensityKey];

Thank you for reading, I hope it can help everyone, thank you for your support to this site!