Explication détaillée et exemple de l'ajout de filtres aux images iOS et du rendu dynamique des images avec openGLES

Ajouter des filtres aux images et utiliser openGLES pour le rendu dynamique des images sur iOS

Il y a deux façons d'ajouter des filtres aux images : CoreImage / openGLES

　Explication d'utilisation de CoreImage pour ajouter des filtres aux images, principalement les étapes suivantes:

#1.Importer l'image au format CIImage

#2.Créer un filtre CIFilter

#3.Rendu de l'image dans le filtre à l'aide de CIContext

#4.Exporter l'image rendue

Code de référence:

//Importer CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  //Créer un filtre Filter
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  //Rendre l'image dans le filtre à l'aide de CIContext
  CIContext *context = [CIContext contextWithOptions:nil];
  CGImageRef cgImage = [context createCGImage:outImage
                    fromRect:[outImage extent]];
  //Exporter l'image
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center = self.view.center;
  [self.view addSubview:imageView];

Lorsque vous devez configurer plusieurs filtres, en plus de créer un nouveau CIFilter, vous devez également définir kCIInputAngleKey, voici le code:

//Importer CIImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
  //Créer un filtre 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 ce ligne n'est pas ajoutée, le filtre ajouté ne fonctionnera pas.
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  //Rendre l'image dans le filtre à l'aide de CIContext
  CIContext *context = [CIContext contextWithOptions:nil]; 
  CGImageRef cgImage = [context createCGImage:outputImage
                    fromRect:[outputImage extent]];
  //Exporter l'image
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center = self.view.center;
  [self.view addSubview:imageView];

Voici comment utiliser OpenGLES pour appliquer un filtre sur une image

Les étapes à suivre pour utiliser openGlES sont approximativement les suivantes:

#1.Importer l'image à rendre

#2.Obtenir le contexte de rendu OpenGLES

#3.Créer le buffer GLKView de rendu

#4.Créer le contexte CoreImage

#5.Effectuer les réglages relatifs à CoreImage

#6.Commencer le rendu et l'affichage de l'image

Code de référence suivant:

//Importer l'image à rendre
  UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
  CGRect rect = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
  //Obtenir le contexte de rendu OpenGLES
  EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2;
  //Créer le buffer de rendu
  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [self.view addSubview:glkView];
  //Créer le contexte CoreImage
  CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext]}
                           options:@{kCIContextWorkingColorSpace: [NSNull null]}];
  //Paramètres relatifs à CoreImage
  CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
  CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(0) forKey:kCIInputIntensityKey];
  //Début du rendu
  [ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
         inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
        fromRect:[ciImage extent]];
  [glkView display];

Si vous souhaitez rendre dynamiquement, vous pouvez ajuster la valeur de vaule du code via UISilder

[filter setValue:vaule forKey:kCIInputIntensityKey];

Merci de lire, j'espère que cela peut aider tout le monde, merci de votre soutien à ce site !