Detalles y ejemplos de aplicación de filtro de imagen y renderizado dinámico de imagen con openGLES en iOS

Agregar filtros a imágenes en iOS y usar openGLES para renderizar imágenes dinámicamente

Hay dos formas de agregar filtros a las imágenes: CoreImage / openGLES

　A continuación, se explica cómo usar CoreImage para agregar filtros a las imágenes, que se realiza principalmente en los siguientes pasos:

#1.Importar la imagen en formato CIImage

#2.Crear el filtro CIFilter

#3.Renderizar la imagen en el CIFilter utilizando CIContext

#4.Exportar la imagen renderizada

Código de referencia:

//Importar CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  //Crear el filtro Filter
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  //Renderiza la imagen con el filtro usando CIContext
  CIContext *context = [CIContext contextWithOptions:nil];
  CGImageRef cgImage = [context createCGImage:outImage
                    fromRect:[outImage extent]];
  //Exporta la imagen
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

Cuando se desee configurar varios filtros, además de crear un nuevo CIFilter, también se debe configurar kCIInputAngleKey, el código es el siguiente:

//Importar CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
  //Crear el filtro 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]; //Si no se agrega esta línea, el filtro recién agregado no entrará en vigencia
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  //Renderiza la imagen con el filtro usando CIContext
  CIContext *context = [CIContext contextWithOptions:nil]; 
  CGImageRef cgImage = [context createCGImage:outputImage
                    fromRect:[outputImage extent]];
  //Exporta la imagen
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

Vamos a explicar cómo usar OpenGL ES para renderizar imágenes con filtros

Los pasos para usar OpenGL ES son aproximadamente los siguientes:

#1.Importa la imagen a renderizar

#2.Obtiene el contexto de renderización OpenGLES

#3.Crea el buffer de GLKView para renderizar

#4.Crea el contexto de CoreImage

#5.Realiza la configuración relacionada con CoreImage

#6.Comienza a renderizar y mostrar la imagen

El código de referencia es el siguiente:

//Importa la imagen a renderizar
  UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
  CGRect rect    = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
  //Obtiene el contexto de renderización OpenGLES
  EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2;
  //Crea el buffer de renderización
  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [self.view addSubview:glkView];
  //Crea el contexto de CoreImage
  CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext]}
                           options:@{kCIContextWorkingColorSpace: [NSNull null]}];
  //Configuraciones relacionadas con CoreImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
  CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(0) forKey:kCIInputIntensityKey];
  //Inicio del renderizado
  [ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
         inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
        fromRect:[ciImage extent]];
  [glkView display];

Si se desea renderizar dinámicamente, se puede ajustar el valor de vaule del código a través de UISilder

[filter setValue:vaule forKey:kCIInputIntensityKey];

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a nuestro sitio!