Kernafbeelding begrijpen

Core Image is Apple's high-performance beeldverwerkingskader dat een rijke verzameling ingebouwde filters, kleuraanpassingen en compositing operaties biedt. Het maakt gebruik van GPU acceleratie om real-time prestaties te leveren, waardoor het ideaal is voor het bouwen van responsieve fotobewerkingstoepassingen op iOS. Het kader integreert strak met UIKit, SwiftUI en Metal, wat betekent dat u een vloeistofbewerkervaring kunt bouwen met live previews en instelbare parameters.

Core Image ondersteunt meer dan 200 filters, waaronder vervagingseffecten, kleuraanpassingen, vervormingseffecten, stylisatiefilters en overgangseffecten. Elk filter accepteert belangrijke parameters die het gedrag ervan regelen, zoals intensiteit, radius of kleur. Het kader ondersteunt ook kettingfilters samen, zodat u complexe beeldverwerkingspijpleidingen kunt maken. Begrijpen hoe u moet werken met , , en is fundamenteel voor het bouwen van een fotobewerkingsapp met Core Image.

Uw ontwikkelingsomgeving instellen

Om te beginnen met het ontwikkelen van uw fotobewerkingsapp, start met het installeren van de nieuwste versie van Xcode uit de Mac App Store. Maak een nieuw project door het selecteren van de iOS App sjabloon, kies Swift als programmeertaal, en kies voor Storyboard of SwiftUI als interface builder afhankelijk van uw voorkeur. Zodra uw project is gemaakt, importeer het Core Image framework in de bestanden waar u afbeeldingsverwerking zal uitvoeren:

Het kan ook nodig zijn om andere kaders te importeren zoals voor UI-componenten, voor toegang tot de fotobibliotheek, en als u van plan bent hardwareversnelling te gebruiken of aangepaste filters op basis van metaal te maken. Zorg ervoor dat uw implementatiedoel is ingesteld op iOS 13 of later om optimaal te profiteren van moderne Core Image-functies.

Afhankelijkheden installeren

Als u van plan bent om Core Image uit te breiden met aangepaste filters of bibliotheken van derden te integreren voor extra functionaliteit, overweeg dan om gebruik te maken van Swift Package Manager of CocoaPods. Echter, voor de meeste standaard fotobewerkingstaken, zijn de ingebouwde filters van Core Image voldoende. Vertrouw uzelf met de Xcode interface, inclusief de activacatalogus voor het beheren van afbeeldingsbronnen en het storyboard voor het opstellen van de gebruikersinterface.

Ontwerpen van de gebruikersinterface

Een goed ontworpen gebruikersinterface is van cruciaal belang voor een fotobewerkingsapp. De interface moet intuïtief, responsief en visueel schoon zijn. Begin met een primaire weergave die de geselecteerde afbeelding weergeeft. Plaats onder of naast de afbeelding een set van controles voor het selecteren van filters, het aanpassen van parameters, en het uitvoeren van acties zoals opslaan of delen.

Overweeg om een UICollectieView of SwiftUI LazyVGrid te gebruiken om filter miniaturen te presenteren. Elke miniatuur toont een voorbeeld van de afbeelding met het bijbehorende filter toegepast, waardoor gebruikers een snelle visuele referentie. Gebruik UISlider of SwiftUI Slider voor parameteraanpassingen zoals intensiteit, helderheid of verzadiging. Een UIStepper kan worden gebruikt voor discrete aanpassingen zoals rotatiehoek. Geef een resetknop om de afbeelding terug te brengen naar zijn oorspronkelijke staat en een undo knop voor stap-voor-stap omkering.

Overwegingen voor live-voorbeeld

Het uitvoeren van een live preview vereist het bijwerken van de afbeelding in real time als de gebruiker parameters aanpast. Gebruik een met een metalen apparaat voor de beste prestaties. Draai de gefilterde afbeelding in een achtergrondthread en update de UI in de hoofdwachtrij. Vermijd rendering bij de volledige resolutie van de oorspronkelijke afbeelding tijdens live-aanpassingen; gebruik in plaats daarvan een down-ingedeelde versie voor previews en pas de uiteindelijke filterketen toe bij volledige resolutie wanneer de gebruiker de bewerking uitvoert.

Afbeeldingsselectie toevoegen

Om gebruikers in staat te stellen om afbeeldingen uit hun fotobibliotheek te kiezen, gebruik of de nieuwere (ingevoerd in iOS 14). biedt een moderne, asynchrone API die de privacy van de gebruiker respecteert en meerdere selecties ondersteunt. Configureer de picker om alleen afbeeldingen toe te staan, stel een gedelegeerde in en toon het modally.

Gebruik van PHPickerViewController:

Als de gebruiker een afbeelding selecteert, laadt u de activagegevens en maakt u een UIImage aan. Zet deze UIImage om naar een CIImage met behulp van ] om te beginnen met verwerken. Voor beelden die direct uit de camera zijn opgenomen, gebruik .

Werken met CIImage en de Image Processing Pipeline

Core Image werkt op objecten, die onveranderlijke afbeeldingen zijn. Een CIImage kan worden gemaakt van een UIImage, een bestand URL, ruwe pixelgegevens, of zelfs programmamatisch gegenereerd. De beeldverwerkingspijplijn volgt deze stappen:

  1. Input: Maak een KIImage aan van de bronafbeelding.
  2. Filterketen: Breng een of meer CIFilter objecten aan op de CIImage. Elk filter wijzigt de afbeelding op basis van de parameters.
  3. Context Rendering: Gebruik een CIContext om de uiteindelijke uitvoer CIImage te maken tot een CGImage of een metaaltextuur.
  4. Display: Zet de CGImage om naar een UIImage en toon het in de UI.

Hier is een voorbeeld van het maken van een CIImage van een UIImage en het weergeven van:

Door de KIImage als werkobject te behouden, kunt u filters ketten zonder tussenliggende rendering, behoud van prestaties en beeldkwaliteit.

Begrijpen van de CI-context

De is de rendering engine voor Core Image. Het beheert GPU of CPU resources en voert de eigenlijke pixelverwerking uit. Maak een CIContext aan met een Metal apparaat voor hardwareversnelling:

Als u veel afbeeldingen rent of complexe filterketens uitvoert, hergebruikt u één CIContext-instance om te voorkomen dat GPU-resources worden hergebruikt. De context kan eenmaal worden aangemaakt en gedurende de hele levenscyclus van de app worden gebruikt.

Core-afbeeldingsfilters toepassen

Core Image biedt tientallen filters gegroepeerd in categorieën zoals kleuraanpassing, vervaging, vervorming, stylize en overgang. Elk filter wordt geïdentificeerd door een tekenreeksnaam zoals of ]. Om een filter toe te passen, volg deze algemene stappen:

  1. Maak een instantie van CIFilter met behulp van .
  2. Stel de invoerafbeelding in met .
  3. Stel filterspecifieke parameters in met behulp van de juiste sleutels zoals , of aangepaste sleutels.
  4. De uitvoer CIImage uit de eigenschap van het filter halen.

Voorbeeld: Een Vignette-effect toepassen

Na het verkrijgen van de uitvoer CIImage, het aan een CGImage met behulp van de CIContext:

Vaak gebruikte filters voor fotobewerking

  • CisepiaTone: Voegt een warme sepia tint toe. Parameter: (0,0 tot 1,0).
  • CIPhotoEffectNoir: Converteert naar een zwart-wit uiterlijk met een hoog contrast. Geen instelbare parameters naast de invoerafbeelding.
  • CIGaussianBlur: Geldt voor een Gaussiaanse vervaging. Parameter: (pixels).
  • CIVignette: Verduistert de randen van de afbeelding. Parameters: en .
  • CIColorBesturingselementen: Past helderheid, contrast en verzadiging aan. Parameters: , , .
  • CIExposureAdjust: Past de blootstelling aan. Parameter: (blootstellingswaarde).
  • CIHighlightShadowAdjust: Controleert hoogtepunten en schaduwen. Parameters: , .

Raadpleeg voor een volledige lijst van beschikbare filters de CIFilter documentatie op Apple's ontwikkelaarssite. Experimenteer met verschillende filters om hun visuele impact en parameterbereik te begrijpen.

Een voorbeeldsysteem voor filteren bouwen

Om gebruikers visueel te laten doorbladeren, genereren miniatuurvoorbeelden voor elk filter. Omlaag de originele afbeelding naar een kleinere grootte (bijv. 200x200 punten) en het filter op de neergeslagen versie toe te passen. Bewaar de resulterende UIImage in een array en toon het in een collectieweergave. Deze aanpak biedt snelle feedback zonder overmatig geheugen of verwerkingsvermogen te verbruiken.

Meerdere filters ketenen

Real-world fotobewerking vereist vaak meerdere aanpassingen in volgorde. Core Image ondersteunt filterketening door de output van het ene filter als invoer naar het andere te voeren. Omdat CIImage onveranderlijk is, kunt u filters ketten zonder bijwerkingen.

Voorbeeld: Sepia Tone Gevolgd door een Vignette

Ketting zoveel filters als nodig is, maar let op de prestaties. Elk filter voegt overhead computational, vooral bij het gebruik van real-time previews. Overweeg het gebruik van een caching strategie voor tussenresultaten als u individuele filterstappen ongedaan moet maken.

Een niet-destructieve pijpleiding aanmaken

Voor een professionele fotobewerkingsapp van kwaliteit, implementeer een niet-destructieve bewerkingspijplijn. Bewaar de originele CIImage en een lijst van toegepaste filters met hun parameters. Wanneer de gebruiker een parameter aanpast, herbouwt u de filterketen van de oorspronkelijke afbeelding en past u alle filters toe op volgorde. Deze aanpak behoudt de beeldkwaliteit en stelt de gebruiker in staat om elke eerdere aanpassing opnieuw te bekijken en aan te passen.

Verbeteren van de gebruikerservaring met interactieve Besturing

Interactieve bedieningen maken het bewerkingsproces intuïtief en aangenaam. Gebruik UISlider voor continue parameters zoals helderheid of vervagingsstraal en gebruik UIStepper voor discrete veranderingen zoals rotatiestappen. Bind de schuifwaarde naar de filterparameter en activeer een herrender wanneer de waarde verandert.

Real-Time Slider Voorbeeld:

Voor de methode, de filterketting naar een neergeslagen CIImage renderen en de UIImageView updaten op de hoofddraad. Gebruik throttling of debouncing om buitensporige weergave te voorkomen wanneer de schuifregelaar snel wordt verplaatst.

Vergelijkingsgebitten toevoegen

Een nuttig UX-patroon is de vergelijking voor en na. Implementeer een tap-and-hold gebaar dat tijdelijk het scherm terugbrengt naar de oorspronkelijke afbeelding, zodat de gebruiker het effect van hun bewerkingen kan zien. Als alternatief kan een split-view slider de helft van het origineel en de helft van de bewerkte afbeelding onthullen. UIScreenEdgePanGestureRecognizer of een aangepaste UIPanGestureRecognizer kan de split positie regelen.

Prestatieoptimalisatie

Prestaties zijn van cruciaal belang voor een soepele fotobewerkingservaring. Core Image is GPU-versneld, maar inefficiënt gebruik kan nog steeds vertraging veroorzaken, vooral bij hoge resolutie beelden van moderne iPhones. Volg deze optimalisatiestrategieën:

  • Gebruik één CIContext: Het maken van meerdere CIContext-instances is duur. Gebruik één context door de app heen.
  • Downsample voor voorbeeld: Tijdens live bewerken, filters toepassen op een neergeslagen versie van de afbeelding (bijv. 1024px aan de langste zijde). Render de volledige resolutie afbeelding alleen wanneer de gebruiker opslaat of exporteert.
  • Renderen in achtergrondthreads: Core Image-bewerkingen zijn draadvrij. Voer rendering uit op een seriële achtergrondwachtrij en verzend UI-updates naar de hoofdwachtrij.
  • Gebruik metaal voor het renderen: Creëer je CIContext met een metalen apparaat om GPU-versnelling te benutten: .
  • Filterketens beperken: Voor real-time previews, houd de filterketen kort. Als de gebruiker veel filters toepast, overweeg dan om ze te combineren tot één enkele subklasse die meerdere bewerkingen in één keer uitvoert.
  • Profile with Instruments: Gebruik Xcode's Instruments tool om prestatieknelpunten te identificeren. De Core Animation en GPU templates helpen om renderingprestaties te visualiseren.

Geheugenbeheer

KIImage objecten kunnen verwijzingen naar grote afbeelding buffers bevatten. Release KIImage objecten die niet meer nodig zijn door ze op nul te zetten. Gebruik autorelease pools in strakke rendering loops om het geheugengebruik onder controle te houden. Voor extreem grote afbeeldingen, overwegen tegelweergave met behulp van om de afbeelding in tegels te verwerken.

Geavanceerde functies

Om uw app op te vallen, overwegen toevoegen geavanceerde functies buiten de basisfilters.

Bijsnijden en roteren

Gebruik ] om de teelt te implementeren. Voor rotatie, gelden of gebruiken voor eenvoudige 90 graden rotaties. Geef visuele gidsen zoals een roosteroverlay en een resizeable gewas rechthoek. Bewaar de gewas rechthoek als een CGRect en breng het als laatste stap in de filterketen.

Kleurcurves en niveaus aanpassen

Core Image biedt en voor geavanceerde kleurindeling. Deze filters accepteren controlepunten die aangepaste kleurcurves definiëren, waardoor ervaren gebruikers fijnkorrelige controle over het tonale bereik van de afbeelding.

Gezichtsdetectie en -verbetering

Integreer voor gezichtsdetectie. Zodra gezichten gedetecteerd zijn, kunt u lokale aanpassingen toepassen zoals huidsmoothing, rood-oogcorrectie of auto-aanscherping. CIDector biedt grenzen voor elk gezicht, die u kunt gebruiken om filters alleen toe te passen op specifieke regio's.

Opslaan en exporteren

Nadat de gebruiker de bewerking heeft voltooid, slaat u de afbeelding op in de fotobibliotheek met . Geef opties om te exporteren in verschillende formaten (JPEG, PNG, HEIF) en resoluties. Gebruik of ] om de afbeeldingsgegevens te schrijven. Voor het delen, gebruik de UIActivityViewController om gebruikers te laten delen naar sociale media, berichten of andere apps.

Uw app testen

Test op een verscheidenheid aan iOS-apparaten met verschillende schermgroottes, verwerkingskracht en cameraresoluties. Gebruik de simulator voor snelle iteraties, maar test altijd op fysieke apparaten voor nauwkeurige prestatiemetingen. Let tijdens live preview op het geheugengebruik en de framesnelheid. Schrijf unittests voor uw filterketenlogica en snapshottests om te controleren of de filteruitgangen consistent blijven in de iOS-versies.

Conclusie

Een fotobewerkingsapp bouwen met Core Image is een lonend project dat beeldverwerking, UI-ontwerp en prestatieoptimalisatie combineert. Door de Core Image-pijpleiding te begrijpen, ingebouwde filters te gebruiken, ketenbewerkingen te verrichten en te optimaliseren voor real-time prestaties, kunt u een app maken die professioneel en responsief voelt. Begin met de hier beschreven basisprincipes, dan itereren op functies en ontwerp die overeenkomen met uw visie. Voor verdere exploratie, verwijzen we naar de Apple Core Image framework documentation[ en sample code projects. Aanvullende begeleiding bij het integreren van Core Image met SwiftUI kan worden gevonden in de SwiftUI tutorials[ van Apple. Met Core Image is de enige limiet uw creativiteit.