Comprendre l'image de base

Core Image est le cadre de traitement d'image haute performance d'Apple qui fournit une riche collection de filtres intégrés, de réglages de couleurs et d'opérations de compilation. Il tire parti de l'accélération GPU pour fournir des performances en temps réel, ce qui le rend idéal pour construire des applications de montage photo réactives sur iOS.

Chaque filtre accepte les paramètres clés qui contrôlent son comportement, comme l'intensité, le rayon ou la couleur. Le cadre prend également en charge les filtres en chaîne ensemble, ce qui vous permet de créer des pipelines complexes de traitement d'image. Comprendre comment travailler avec , et est fondamental pour construire une application de montage photo avec Core Image.

Mettre en place votre environnement de développement

Pour commencer à développer votre application de retouche photo, commencez par installer la dernière version de Xcode depuis le Mac App Store. Créez un nouveau projet en sélectionnant le modèle d'application iOS, choisissez Swift comme langage de programmation, et optez pour Storyboard ou SwiftUI comme constructeur d'interface selon votre préférence. Une fois votre projet créé, importez le cadre de l'image de base dans les fichiers où vous effectuerez le traitement d'image :

Vous pouvez également avoir besoin d'importer d'autres cadres tels que pour les composants de l'interface utilisateur, pour accéder à la bibliothèque de photos, et si vous prévoyez d'utiliser l'accélération matérielle ou de créer des filtres métalliques personnalisés.

Installer les dépendances

Si vous envisagez d'étendre l'image de base avec des filtres personnalisés ou d'intégrer des bibliothèques tierces pour des fonctionnalités supplémentaires, envisagez d'utiliser Swift Package Manager ou CocoaPods. Cependant, pour la plupart des tâches standard d'édition de photos, les filtres intégrés de Core Image sont suffisants. Familiarisez-vous avec l'interface Xcode, y compris le catalogue des actifs pour la gestion des ressources d'image et le storyboard pour la mise en page de l'interface utilisateur.

Conception de l'interface utilisateur

Une interface utilisateur bien conçue est essentielle pour une application de retouche photo. L'interface doit être intuitive, réactive et visuellement propre. Commencez par une vue primaire qui affiche l'image sélectionnée. Ci-dessous ou à côté de l'image, placez un ensemble de commandes pour sélectionner les filtres, ajuster les paramètres et effectuer des actions comme l'enregistrement ou le partage.

Chaque vignette affiche un aperçu de l'image avec le filtre correspondant appliqué, ce qui donne aux utilisateurs une référence visuelle rapide. Utilisez UISlider ou SwiftUI Slider pour les réglages de paramètres tels que l'intensité, la luminosité ou la saturation. Un UIStepper peut être utilisé pour des ajustements discrets comme l'angle de rotation. Fournissez un bouton de remise à zéro pour renvoyer l'image à son état d'origine et un bouton de désactivation pour un renversement étape par étape.

Considérations de la vue d'ensemble

Pour mettre en œuvre un aperçu en direct, il faut mettre à jour l'image en temps réel, car l'utilisateur ajuste les paramètres. Utilisez un avec un dispositif métallique pour obtenir les meilleures performances. Renvoyez l'image filtrée dans un fil de fond et mettez à jour l'interface utilisateur sur la file d'attente principale. Évitez de rendre l'image à la résolution complète lors des réglages en direct; utilisez plutôt une version sous-échantillonnée pour les aperçus et appliquez la chaîne de filtres finale à la résolution complète lorsque l'utilisateur engage l'édition.

Ajout de la sélection d'image

Pour permettre aux utilisateurs de choisir des images dans leur bibliothèque photo, utilisez ou le nouveau (introduit dans iOS 14). offre une API moderne et asynchrone qui respecte la confidentialité des utilisateurs et prend en charge plusieurs sélections. Configurez le sélecteur pour n'autoriser que les images, définissez un délégué et présentez-le de façon modale.

Utilisation de PHPickerViewController:

Lorsque l'utilisateur sélectionne une image, chargez les données de l'actif et créez une UIImage. Convertissez cette UIImage en CIImage en utilisant pour commencer le traitement. Pour les images capturées directement depuis l'appareil photo, utilisez .

Travailler avec CIImage et le pipeline de traitement d'images

Une image de base fonctionne sur des objets qui sont des représentations immuables d'images. Une image CI peut être créée à partir d'une interface image, d'une URL de fichier, de données brutes de pixel ou même générées programmatiquement. Le pipeline de traitement d'image suit ces étapes :

  1. Input: Créez une image CI à partir de l'image source.
  2. Chaîne de filtres:[ Appliquer un ou plusieurs objets CIFilter à la CIImage. Chaque filtre modifie l'image en fonction de ses paramètres.
  3. Contexte Rendu:[ Utilisez un CIContext pour rendre la sortie finale CIImage dans un CGImage ou une texture métallique.
  4. Affichage: Convertissez le CGImage en UIImage et affichez-le dans l'interface utilisateur.

Voici un exemple de création d'une image CI à partir d'une interface utilisateur et de l'affichage :

En gardant le CIImage comme objet de travail, vous pouvez chaîner des filtres sans rendu intermédiaire, en préservant la performance et la qualité d'image.

Comprendre le CIContexte

Le est le moteur de rendu pour Core Image. Il gère les ressources GPU ou CPU et effectue le traitement réel des pixels. Créez un CIContext avec un dispositif métallique pour l'accélération matérielle:

Si vous effectuez de nombreuses images ou des chaînes de filtres complexes, réutilisez une seule instance CIContext pour éviter de recréer des ressources GPU. Le contexte peut être créé une fois et utilisé tout au long du cycle de vie de l'application.

Application des filtres d'image de base

L'image de base fournit des dizaines de filtres regroupés en catégories telles que le réglage de la couleur, le flou, la distorsion, le stylis et la transition. Chaque filtre est identifié par un nom de chaîne comme ou . Pour appliquer un filtre, suivez ces étapes générales :

  1. Créer une instance de CIFilter en utilisant .
  2. Définissez l'image d'entrée en utilisant .
  3. Définir des paramètres spécifiques au filtre en utilisant les touches appropriées comme , , ou des touches personnalisées.
  4. Récupérer la sortie CIImage depuis la propriété du filtre.

Exemple: Application d'un effet Vignette

Après avoir obtenu la sortie CIImage, rendez-la à un CGImage en utilisant le CIContext:

Filtres couramment utilisés pour l'édition de photos

  • CISepiaTone: Ajoute une teinte de septia chaude. Paramètre: (0,0 à 1,0).
  • CIPhotoEffectNoir: Convertit en noir et blanc à un aspect à contraste élevé. Aucun paramètre réglable en dehors de l'image d'entrée.
  • CIGaussianBlur: Applique un flou gaussien. Paramètre: (pixels).
  • CIVignette: Obscurcit les bords de l'image. Paramètres: et .
  • CIColorContrôles:[ Ajuste la luminosité, le contraste et la saturation. Paramètres: , , .
  • CIExposureAdjust: Ajuste l'exposition. Paramètre: (valeur d'exposition).
  • CIHighlightShadowAdjust: Contrôles des points forts et des ombres. Paramètres: , .

Pour une liste complète des filtres disponibles, consultez la documentation CIFilter sur le site développeur d'Apple. Expérimentez avec différents filtres pour comprendre leur impact visuel et leurs plages de paramètres.

Construire un système de prévisualisation des filtres

Pour laisser les utilisateurs parcourir les filtres visuellement, générer des aperçus miniatures pour chaque filtre. Déposer l'image originale à une taille plus petite (par exemple 200x200 points) et appliquer le filtre à la version sous-échantillonnée. Stocker l'interface utilisateur dans un tableau et l'afficher dans une vue de collection. Cette approche fournit une rétroaction rapide sans consommer une mémoire excessive ou une puissance de traitement.

Filtreurs multiples en chaîne

L'édition photo du monde réel nécessite souvent l'application de plusieurs ajustements en séquence. Core Image supporte la chaîne de filtre en alimentant la sortie d'un filtre comme entrée à un autre. Parce que CIImage est immuable, vous pouvez chaîner des filtres sans effets secondaires.

Exemple: Sepia Tone suivi d'une vignette

Chaînez autant de filtres que nécessaire, mais gardez à l'esprit les performances. Chaque filtre ajoute des frais généraux de calcul, surtout lorsque vous utilisez des prévisualisations en temps réel.

Création d'un pipeline d'édition non destructive

Pour une application de montage photo de qualité professionnelle, implémentez un pipeline d'édition non destructive. Conservez le CIImage original et une liste de filtres appliqués avec leurs paramètres. Lorsque l'utilisateur ajuste un paramètre, rebâtissez la chaîne de filtres à partir de l'image originale et appliquez tous les filtres dans l'ordre. Cette approche préserve la qualité de l'image et permet à l'utilisateur de revoir et de modifier tout ajustement précédent.

Améliorer l'expérience utilisateur avec les contrôles interactifs

Les contrôles interactifs rendent le processus d'édition intuitive et agréable. Utilisez UISlider pour les paramètres continus comme la luminosité ou le rayon de flou, et utilisez UIStepper pour les changements discrets comme les incréments de rotation.

Exemple de curseur en temps réel :

Pour la méthode , rendez la chaîne de filtre dans une CIImage sous-échantillonnée et mettez à jour l'interface de visualisation sur le thread principal. Utilisez le throttling ou le débonflage pour éviter un rendu excessif lorsque le curseur est déplacé rapidement.

Ajout de gestuelles de comparaison

Un motif UX utile est la comparaison avant et après. Implémentez un geste tap-and-hold qui retourne temporairement l'affichage à l'image originale, permettant à l'utilisateur de voir l'effet de leurs modifications. Alternativement, un curseur de vision scintille peut révéler la moitié de l'image originale et la moitié de l'image éditée. UIScreenEdgePanGestureRecognizer ou un UIPanGestureRecognizer personnalisé peut contrôler la position scindée.

Optimisation des performances

Les performances sont essentielles pour une expérience de montage photo en douceur. L'image de base est accélérée par GPU, mais une utilisation inefficace peut encore causer du décalage, en particulier avec des images haute résolution à partir des iPhones modernes.

  • Utilisez un seul CIContext:[ Créer plusieurs instances CIContext est coûteux. Réutiliser un contexte dans l'application.
  • Exemple de l'aperçu :[ Lors de l'édition en direct, appliquer des filtres à une version sous-échantillonnée de l'image (p. ex., 1024px sur le côté le plus long).
  • Rendre dans les threads de fond: Les opérations de l'image de base sont sans fil. Effectuer le rendu sur une file d'attente de fond série et envoyer des mises à jour de l'interface utilisateur à la file d'attente principale.
  • Utilisez le métal pour le rendu: Créez votre CIContext avec un dispositif métal pour tirer parti de l'accélération du GPU: .
  • Limiter les chaînes de filtre: Pour les prévisualisations en temps réel, garder la chaîne de filtre courte. Si l'utilisateur applique de nombreux filtres, envisager de les combiner en une seule sous-classe qui effectue plusieurs opérations en un seul passage.
  • Profil avec Instruments: Utilisez l'outil Instruments de Xcode pour identifier les goulets d'étranglement de performance. Les modèles Core Animation et GPU aident à visualiser les performances de rendu.

Gestion de la mémoire

Les objets CIImage peuvent contenir des références à des tampons d'images volumineux. Relâchez les objets CIImage qui ne sont plus nécessaires en les mettant à zéro. Utilisez des piscines de release automatique dans des boucles de rendu serrées pour garder le contrôle de l'utilisation de la mémoire.

Caractéristiques avancées

Pour faire ressortir votre application, envisagez d'ajouter des fonctionnalités avancées au-delà des filtres de base.

Culture et rotation

Pour la rotation, appliquer ou utiliser pour des rotations simples de 90 degrés. Fournir des guides visuels comme une superposition de grille et un rectangle de culture résilient. Entreposer le rectangle de culture comme un CGRect et l'appliquer comme dernière étape de la chaîne de filtration.

Réglage des courbes et des niveaux de couleur

L'image de base fournit et pour le classement des couleurs avancé. Ces filtres acceptent des points de contrôle qui définissent des courbes de couleurs personnalisées, donnant aux utilisateurs expérimentés un contrôle finement grainé sur la gamme de tonalité de l'image.

Détection et amélioration du visage

Une fois les visages détectés, vous pouvez appliquer des réglages locaux tels que lissage de la peau, correction des yeux rouges ou auto-enhancement. CIDEtector fournit des limites pour chaque visage, que vous pouvez utiliser pour appliquer des filtres uniquement à des régions spécifiques.

Économie et exportation

Une fois l'utilisateur terminé, enregistrez l'image dans la bibliothèque photo en utilisant . Fournissez des options pour exporter dans différents formats (JPEG, PNG, HEIF) et résolutions. Utilisez ou pour écrire les données de l'image. Pour le partage, utilisez l'interface de contrôle UIActivityView pour laisser les utilisateurs partager sur les médias sociaux, les messages ou d'autres applications.

Tester votre application

Testez sur une variété de dispositifs iOS avec différentes tailles d'écran, puissance de traitement et résolutions de caméra. Utilisez le simulateur pour les itérations rapides, mais toujours testez sur des dispositifs physiques pour des mesures de performance précises. Faites une attention particulière à l'utilisation de la mémoire et au taux d'image lors de l'aperçu en direct.

Conclusion

En comprenant le pipeline de l'image de base, en tirant parti des filtres intégrés, des opérations de chaîne et en optimisant les performances en temps réel, vous pouvez créer une application qui se sent professionnelle et réactive. Commencez par les fondamentaux décrits ici, puis itérez-vous sur les fonctionnalités et la conception pour correspondre à votre vision. Pour plus d'informations, reportez-vous à la documentation du cadre de l'image de base et aux projets de code-échantillon. Des conseils supplémentaires sur l'intégration de l'image de base avec SwiftUI sont disponibles dans les tutoriels SwiftUI d'Apple. Avec l'image de base, la seule limite est votre créativité.