Appliquer des filtres photo avec l’image principale dans Swift

La puissance du Core Image Framework

Core Image est une technologie de traitement et d’analyse d’images conçue pour fournir un traitement en temps quasi réel des images fixes et vidéo sous iOS et OS X. Apple a créé quelques effets photo prédéfinis que vous pouvez facilement utiliser pour vos applications de photographie, avec des noms tels que Instant, Process, Sepia, Tonal, etc.

Référence d’image principale

La bibliothèque de développement iOS fournit une bonne explication du traitement d’image Core Image dans le Collection de références d’images de base.

Je vous suggère de consulter également le Référence du filtre d’image principale page afin d’obtenir une liste complète des CIFilters. Veuillez noter que tous ces éléments ne sont pas compatibles avec iOS; certains d’entre eux ne fonctionnent que sur OS X.

Nous utiliserons les filtres d’image de base suivants:

• CIPhotoEffectChrome
• CISepiaTone
• CIPhotoEffectTransfer
• CIPhotoEffectTonal
• CIPhotoEffectProcess
• CIPhotoEffectNoir
• CIPhotoEffectInstant
• CIPhotoEffectFade

Noter: Ce didacticiel est écrit à l’aide de Xcode 7.3 et Swift 2.2, avec une cible de déploiement définie sur 8.0, de sorte que votre application fonctionnera également sur les appareils plus anciens.

Commençons!

Créer un projet et ajouter des vues

Ouvrez Xcode et créez un nouveau projet, Application iOS Single View. Choisir Rapide comme langue et Universel pour les appareils. Vous aurez un blanc UIViewController dans le Storyboard et quelques .rapide des dossiers: ViewController.swift et AppDelegate.swift.

Sélectionnez le contrôleur dans le Storyboard et définissez sa taille comme iPhone 3,5 pouces dans le panneau de droite, sous Mesures simulées. Cela vous aidera à adapter les vues pour l’iPhone 4S, l’appareil Apple avec la plus petite taille d’écran disponible.

Nous n’utiliserons pas la mise en page automatique dans ce didacticiel, car cela gâche les mises en page sur des appareils plus gros comme l’iPad et l’iPad Pro. Désactivez-le en sélectionnant Inspecteur de fichiers et décochez Utiliser la disposition automatique. Cliquez ensuite sur le Désactiver les classes de taille bouton de la fenêtre contextuelle.

Recherchez maintenant une image JPEG, que ce soit sur le Web ou sur votre Mac, et faites-la glisser sous le Actifs.xcassets dossier dans le panneau Navigateur de projet. Nous utiliserons cela comme un exemple d’image auquel nous pouvons appliquer nos filtres. Nommez ce fichier image.jpg; nous l’appellerons plus tard dans le code.

Vous devrez faire glisser des vues supplémentaires dans le contrôleur. Sélectionnez la bibliothèque d’objets dans le coin inférieur droit de Xcode et faites glisser un UIView au centre de l’écran. Redimensionnez la vue à 320 x 320 px et centrez-la horizontalement.

Maintenant, ajoutez deux UIImageViews dans votre Storyboard, en les trouvant dans la bibliothèque d’objets et en les faisant glisser dans le UIView. Redimensionnez ces vues d’image pour remplir cette vue principale (nous verrons comment définir leurs propriétés de redimensionnement automatique plus tard). Attribuer image.jpg à la première vue d’image avec le panneau de l’inspecteur d’attributs.

Ensuite, faites glisser un UIScrollView en bas de l’écran et réglez sa largeur pour qu’elle corresponde à la largeur du contrôleur. Vous pouvez également ajouter un UILabel en haut du contrôleur et définissez son texte sur Filtres. Ce sera le titre de votre application.

Enfin, ajoutez un UIButton dans le coin supérieur gauche de l’écran et faites son titre Sauvegarder.

Définir les vues de redimensionnement automatique et de mise en page

L’inspecteur de taille Le panneau peut être affiché en cliquant sur la petite icône de règle dans le coin supérieur droit de l’écran. Faites-le maintenant et commencez à modifier les tailles de vue en sélectionnant le UIButton. L’inspecteur de taille vous montrera ses coordonnées x et y sur l’écran (gardez à l’esprit que x est 0 sur le côté gauche de l’écran et y est 0 en haut). Définissez la largeur et la hauteur sur 44 px.

Définissez le masque de redimensionnement automatique du bouton pour qu’il se fixe sur les côtés supérieur et gauche de l’écran.

Sélectionnez maintenant toutes les autres vues, une par une, et ajustez leur taille et leur position comme suit:

Le titre de l’application a une largeur de 320 px et une hauteur de 44 px et se fixe en haut de l’écran.

Les vues d’image ont chacune une largeur et une hauteur de 320 px.

Enfin, la vue de défilement (pour les options de filtre) a une largeur de 320 px et une hauteur de 80 px.

Déclaration de vues dans le fichier .swift

L’une des plus belles fonctionnalités de Xcode est la possibilité de diviser l’espace de travail en deux parties et d’avoir le Storyboard d’un côté et un fichier Swift de l’autre. Pour ce faire, vous devez cliquer sur le Rédacteur adjoint icône dans le coin supérieur droit de votre fenêtre Xcode:

Si ton ViewController est sélectionné dans Storyboard, la section de droite affichera automatiquement son relatif .rapide déposer. Au cas où cela ne se produirait pas, vous pouvez essayer de cliquer sur le menu horizontal en haut du fichier swift et basculer Manuel à Automatique:

Maintenant, attachons quelques-unes de nos vues à la ViewController.swift déposer. Du Plan du document panneau, sélectionnez le UIView qui contient les deux UIImageViews, maintenez Contrôler (ou le bouton droit de la souris), et faites glisser le pointeur de votre souris en dessous pour obtenir la déclaration de classe de votre contrôleur de vue.

Relâchez le bouton de la souris et une fenêtre contextuelle apparaîtra. Tapez le nom du UIView–containerView—Et cliquez sur Relier bouton.

Vous venez d’ajouter une déclaration pour un IBOutlet de type UIView à ton .rapide déposer. Faites la même chose pour les autres vues d’image: faites glisser la ligne bleue sous chaque instance que vous déclarerez, et nommez la première originalImage et le second imageToFilter. Sois sûr que originalImage est celui avec image.jpg comme une image.

Puis connectez le UIScrollView et nommez-le filtersScrollView. Cela stockera tous les boutons pour appliquer des filtres à votre image.

Nous déclarerons notre UIButton plus tard comme un IBAction. Ce bouton nous permettra d’enregistrer notre image filtrée dans la photothèque de notre appareil.

Codons!

Création d’un tableau de filtres d’image principaux

Dans Swift, vous pouvez déclarer des variables globales en les plaçant simplement en dehors d’un class déclaration, dans notre cas celui-ci:

class ViewController: UIViewController {

Nous devons créer un tableau de CIFilter noms:

var CIFilterNames = [
    "CIPhotoEffectChrome",
    "CIPhotoEffectFade",
    "CIPhotoEffectInstant",
    "CIPhotoEffectNoir",
    "CIPhotoEffectProcess",
    "CIPhotoEffectTonal",
    "CIPhotoEffectTransfer",
    "CISepiaTone"
]

Comme mentionné au début de ce didacticiel, nous devons utiliser les noms de filtre Core Image d’origine pour que notre application les reconnaisse. Nous attribuerons ces filtres aux boutons que nous créerons plus tard, qui appliqueront le filtre à notre image.

Masquer la barre d’état

La plupart du temps, vous souhaiterez peut-être masquer la barre d’état de votre écran. Depuis Xcode 7.0, il n’est plus possible de définir la propriété masquée de la barre d’état dans Info.plist, vous devez donc ajouter cette méthode juste au-dessus viewDidLoad():

override func prefersStatusBarHidden() -> Bool {
    return true
}

Création des boutons de filtre

Le viewDidLoad() est une instance par défaut créée par Xcode chaque fois que vous ajoutez un .rapide fichier à votre projet; il est appelé lorsque l’écran et toutes ses vues sont chargés. Si vous souhaitez effectuer une action avant même que cela ne se produise, vous pouvez utiliser le viewDidAppear() ou viewWillAppear() méthodes, mais nous n’en avons pas besoin. Ajoutons donc quelques variables de type CGFloat juste en dessous super.viewDidLoad():

override func viewDidLoad() {
    super.viewDidLoad()
    
    var xCoord: CGFloat = 5
    let yCoord: CGFloat = 5
    let buttonWidth:CGFloat = 70
    let buttonHeight: CGFloat = 70
    let gapBetweenButtons: CGFloat = 5

Ces valeurs sont nécessaires pour placer une rangée de boutons dans notre filtersScrollView. Comme vous pouvez le voir dans le code ci-dessus, le xCoord est la position X où un bouton sera placé, yCoord est la position Y, buttonWidth et buttonHeight sont sa taille, et gapBetweenButtons est l’espace entre chaque bouton.

Maintenant, nous devons créer les boutons en utilisant un for boucle qui dupliquera un personnalisé UIButton et placez-le dans le filtersScrollView basé sur les valeurs ci-dessus.

Placez ce code juste en dessous de ceux CGFloat les instances:

    var itemCount = 0
        
    for i in 0..<CIFilterNames.count {
        itemCount = i
            
        // Button properties
        let filterButton = UIButton(type: .Custom)
        filterButton.frame = CGRectMake(xCoord, yCoord, buttonWidth, buttonHeight)
        filterButton.tag = itemCount
        filterButton.addTarget(self, action: #selector(ViewController.filterButtonTapped(_:)), forControlEvents: .TouchUpInside)
        filterButton.layer.cornerRadius = 6
        filterButton.clipsToBounds = true
        
        // CODE FOR FILTERS WILL BE ADDED HERE...

Voyons ce qui se passe dans ce code. itemCount est une variable que nous utiliserons plus tard pour ajouter nos boutons de filtre en tant que sous-vues du filtersScrollView. Vous remarquerez peut-être que nous avons déclaré cette variable avec le var préfixe. C’est parce qu’il sera modifié par le for boucle. Si vous souhaitez déclarer des constantes dans Swift, vous utilisez le let préfixe, comme nous l’avons fait pour le filterButton.

Utiliser le nouveau for syntaxe de boucle de Swift 2.2, nous n’avons pas besoin d’écrire i++ plus. La boucle s’incrémentera i automatiquement en comptant de 0 au nombre d’éléments du CIFilterNames déployer.

À l’intérieur de ça for boucle, nous créons un bouton personnalisé, définissons son CGRect values, attribuez-lui une balise et ajoutez-lui une action cible qui appelle une fonction que nous verrons plus tard: filterButtonTapped().

Afin de rendre notre bouton joli, avec des coins arrondis, nous utilisons le layer et définissons son rayon d’angle sur 6. Ensuite, nous découpons l’image pour qu’elle soit contenue dans ses limites, sinon elle couvrirait les coins arrondis.

Ajouter l’image aux boutons et appliquer des filtres

Le morceau de code suivant doit être ajouté sous le commentaire du précédent:

        // Create filters for each button
        let ciContext = CIContext(options: nil)
        let coreImage = CIImage(image: originalImage.image!)
        let filter = CIFilter(name: "(CIFilterNames[i])" )
        filter!.setDefaults()
        filter!.setValue(coreImage, forKey: kCIInputImageKey)
        let filteredImageData = filter!.valueForKey(kCIOutputImageKey) as! CIImage
        let filteredImageRef = ciContext.createCGImage(filteredImageData, fromRect: filteredImageData.extent)
        let imageForButton = UIImage(CGImage: filteredImageRef);

Ici, nous initialisons un CIContext et CIImage pour laisser Core Image travailler originalImage (image.jpg) que chaque bouton affichera. Ensuite, nous initialisons une variable de filtre de type CIFilter qui sera appelé par chaque bouton via le for boucle basée sur la CIFilterNames déployer.

Notre filter l’instance doit définir son état par défaut, puis elle devient la clé d’entrée pour les images. Ensuite, nous créons l’objet de données à partir de celui-ci et sa référence d’image, que nous utiliserons pour créer un UIImage tout de suite qui sera attaché au bouton.

Étant donné que les filtres que nous avons sélectionnés pour ce didacticiel sont préfabriqués par Apple, nous n’avons pas besoin d’appliquer de valeur supplémentaire (telle que l’intensité, la couleur, etc.). Si vous souhaitez obtenir des informations sur d’autres CIFilters, vous pouvez vérifier le Référence du filtre d’image principale page.

Dans la dernière ligne de cette section, nous définissons enfin l’image d’arrière-plan du bouton que nous avons précédemment créée.

        // Assign filtered image to the button
        filterButton.setBackgroundImage(imageForButton, forState: .Normal)        

Ajout de boutons au ScrollView

Encore quelques lignes pour compléter notre viewDidLoad() méthode:

        // Add Buttons in the Scroll View
        xCoord +=  buttonWidth + gapBetweenButtons
        filtersScrollView.addSubview(filterButton)
    } // END FOR LOOP 
        
        
    // Resize Scroll View
    filtersScrollView.contentSize = CGSizeMake(buttonWidth * CGFloat(itemCount+2), yCoord)

} // END viewDidload()

Nous ajoutons des boutons comme sous-vues à la filtersScrollView en fonction de leur position et de la largeur et de l’espace qu’ils doivent garder entre eux. Puis finalement nous fermons le for boucle.

Enfin, nous devons définir le contentSize de nôtre ScrollView pour s’adapter à tous les boutons. Voici où nous utilisons enfin le itemCount variable précédemment déclarée, convertie en CGFloat (car CGSizeMake il n’accepte pas Int valeurs).

L’action du bouton de filtrage

Nous avons presque terminé, avec juste quelques lignes de code supplémentaires!

Dans le ViewController classe, dehors viewDidLoad(), créez le filterButtonTapper() fonction. Cela sera appelé chaque fois que vous appuyez sur l’un des boutons que nous avons générés auparavant.

func filterButtonTapped(sender: UIButton) {
    let button = sender as UIButton
        
    imageToFilter.image = button.backgroundImageForState(UIControlState.Normal)
}

Nous devons créer une instance de UIButton d’abord, puis définissez le imageToFilterl’image de ce bouton basée sur l’image d’arrière-plan de ce bouton, qui a déjà été filtrée par le code placé dans viewDidLoad().

Assurez-vous que le UIImageView appelé imageToFilter superpose le originalImage, comme indiqué ci-dessous, sinon l’application ne vous montrera pas l’image traitée car l’image d’origine la masquera.

Enregistrement de l’image traitée

Nous sommes arrivés à la fin de ce didacticiel, et il n’y a plus qu’une fonction à ajouter à votre .rapide déposer. C’est le bouton Enregistrer que nous avons précédemment placé dans le Storyboard. Tenir Contrôler et le bouton de la souris, faites glisser une ligne bleue depuis le UIButton dans un espace vide de votre classe, relâchez le bouton de la souris et une nouvelle fenêtre contextuelle apparaîtra. Ici, vous devez changer le Connexion tapez à action et entrez le nom de votre méthode – dans ce cas savePicButton—Et cliquez sur Relier bouton.

Vous avez créé un IBAction cette fois, et voici le code qui doit y être placé:

    // Save the image into camera roll
    UIImageWriteToSavedPhotosAlbum(imageToFilter.image!, nil, nil, nil)
        
    let alert = UIAlertView(title: "Filters",
                message: "Your image has been saved to Photo Library",
                delegate: nil,
                cancelButtonTitle: "OK")
    alert.show()

La première ligne enregistre simplement l’image contenue dans imageToFilter directement dans la photothèque de votre appareil ou dans le simulateur iOS. Ensuite, nous tirons un simple UIAlertView qui confirme que l’opération a été effectuée.

OK, exécutons notre application et voyons ce qui se passe si nous tapons sur les boutons en bas. Si vous avez tout fait correctement, votre application devrait ressembler à ceci:

Merci d’avoir lu et à la prochaine fois! Veuillez consulter certains de nos autres tutoriels sur le développement d’applications Swift et iOS.