iOS adds filters to images & uses openGLES to dynamically render pictures and examples for detailed explanations and examples

iOS adds filters to images & dynamically render pictures using openGLES

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

The following is the following steps:

#1. Import original images in CIImage format

#2. Create CIFilter filters

#3. Render the image in the filter using CIContext

#4. Export the rendered picture

Reference code:

//Import CIImage  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  
  //Create Filter filter  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  
  [filter setValue:ciImage forKey:kCIInputImageKey];
  
  [filter setDefaults];
  
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  
  //Resource the image in the filter using CIContext  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];
      = ;
  [ addSubview:imageView];

When you want to set multiple filters, you need to create a new CIFilter and also set kCIInputAngleKey. The code is as follows:

//Import CIImage  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@""]];
  
  //Create 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 the new filters are not added in this line, it will not take effect  
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  
  //Resource the image in the filter using CIContext  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];
      = ;
  [ addSubview:imageView];

Here is how to use openGLES to render pictures using filters

The steps to use openGlES are roughly as follows:

#1. Import the image to be rendered

#2. Get the context of OpenGLES rendering

#3. Create a rendered GLKView buffer

#4. Create the context of a CoreImage

#5. Make relevant settings for CoreImage

#6. Start rendering and displaying the picture

The reference code is as follows:

//Import the image to be rendered  UIImage *showImage = [UIImage imageNamed:@""];
  CGRect rect    = CGRectMake(0, 0, , );
  
  //Get the context of OpenGLES rendering  EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
  
  //Create a rendered buffer  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [ addSubview:glkView];
  
  //Create the context of 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, , )
        fromRect:[ciImage extent]];
  
  [glkView display];

If you want to render dynamically, you can dynamically adjust the value of the code through UISilder

[filter setValue:vaule forKey:kCIInputIntensityKey];

Thank you for reading, I hope it can help you. Thank you for your support for this site!