English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Adição de Filtros a Imagens em iOS e Explicação Detalhada do Uso de openGLES para Renderizar Imagens Dinamicamente, com Exemplos

iOS adiciona filtros a imagens e usa openGLES para renderizar imagens dinamicamente

Existem duas maneiras de adicionar filtros a imagens: CoreImage / openGLES

 Primeiro, explicarei como usar CoreImage para adicionar filtros a imagens, principalmente os seguintes passos:

#1.Importar imagem no formato CIImage

#2.Criar filtro CIFilter

#3.Renderizar a imagem no CIContext

#4.Exportar a imagem renderizada

Código de referência:

//Importar CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  //Criar filtro Filter
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  //Usa CIContext para renderizar a imagem no filtro
  CIContext *context = [CIContext contextWithOptions:nil];
  CGImageRef cgImage = [context createCGImage:outImage
                    fromRect:[outImage extent]];
  //Exporta a imagem
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

Quando precisar configurar vários filtros, além de criar um novo CIFilter, ainda é necessário configurar o kCIInputAngleKey, o código é o seguinte:

//Importar CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
  //Criar 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]; //Se não aumentar essa linha, o filtro adicionado não entrará em vigor
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  //Usa CIContext para renderizar a imagem no filtro
  CIContext *context = [CIContext contextWithOptions:nil]; 
  CGImageRef cgImage = [context createCGImage:outputImage
                    fromRect:[outputImage extent]];
  //Exporta a imagem
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

Agora vamos mostrar como usar openGLES para renderizar imagens com filtros

Os passos para usar openGlES são大致如下:

#1.Importa a imagem a ser renderizada

#2.Obtém o contexto de renderização OpenGLES

#3.Cria o buffer GLKView de renderização

#4.Cria o contexto CoreImage

#5.Realiza as configurações relacionadas ao CoreImage

#6.Começa a renderizar e exibir a imagem

Aqui está um exemplo de código:

//Importa a imagem a ser renderizada
  UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
  CGRect rect    = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
  //Obtém o contexto de renderização OpenGLES
  EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2;
  //Cria o buffer de renderização
  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [self.view addSubview:glkView];
  //Cria o contexto CoreImage
  CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext]}
                           options:@{kCIContextWorkingColorSpace: [NSNull null]}];
  //Configurações relacionadas ao CoreImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
  CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(0) forKey:kCIInputIntensityKey];
  //Início da renderização
  [ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
         inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
        fromRect:[ciImage extent]];
  [glkView display];

Se precisar de renderização dinâmica, pode ajustar o valor do código através de UISilder

[filter setValue:vaule forKey:kCIInputIntensityKey];

Obrigado por ler, espero que ajude, obrigado pelo apoio ao site!

Você também pode gostar