Comprendere l'immagine del nucleo

Core Image è il framework di elaborazione delle immagini ad alte prestazioni di Apple che offre una ricca collezione di filtri integrati, regolazioni di colore e operazioni di compositing. Esso sfrutta l'accelerazione GPU per fornire prestazioni in tempo reale, rendendolo ideale per la costruzione di applicazioni di editing foto reattiva su iOS. Il framework si integra strettamente con UIKit, SwiftUI e Metal, il che significa che è possibile costruire un'esperienza di editing fluido con anteprime e parametri regolabili.

Core Image supporta oltre 200 filtri, tra cui effetti sfocatura, regolazioni di colore, effetti distorsione, filtri di stilizzazione e effetti di transizione. Ogni filtro accetta parametri chiave che controllano il suo comportamento, come intensità, raggio o colore. Il framework supporta anche la catenazione dei filtri insieme, permettendo di creare complesse tubazioni di elaborazione delle immagini.

Impostazione del tuo ambiente di sviluppo

Per iniziare a sviluppare la tua applicazione di editing fotografico, inizia installando l'ultima versione di Xcode dal Mac App Store. Crea un nuovo progetto selezionando il modello di app iOS, scegli Swift come il linguaggio di programmazione e opta per Storyboard o SwiftUI come costruttore di interfacce a seconda della tua preferenza. Una volta creato il tuo progetto, importa il framework Core Image nei file in cui eseguirai l'elaborazione delle immagini:

Potrebbe anche essere necessario importare altri framework come ] per i componenti UI, per accedere alla libreria di foto, e [] se si prevede di utilizzare l'accelerazione hardware o creare filtri personalizzati basati su metalli.

Installazione delle dipendenze

Se si prevede di estendere Core Image con filtri personalizzati o integrare librerie di terze parti per funzionalità aggiuntive, si consideri l'utilizzo di Swift Package Manager o CocoaPods. Tuttavia, per la maggior parte delle attività di editing fotografico standard, i filtri integrati Core Image sono sufficienti.

Progettazione dell'interfaccia utente

L'interfaccia utente ben progettata è fondamentale per un'app di editing fotografico. L'interfaccia dovrebbe essere intuitiva, reattiva e visivamente pulita. Inizia con una vista primaria che visualizza l'immagine selezionata. Di seguito o accanto all'immagine, posizionare un set di controlli per la selezione dei filtri, la regolazione dei parametri e l'esecuzione di azioni come il salvataggio o la condivisione.

Considerate l'utilizzo di un UICollectionView o di SwiftUI LazyVGrid per presentare le miniature del filtro. Ogni thumbnail mostra un'anteprima dell'immagine con il filtro corrispondente applicato, dando agli utenti un rapido riferimento visivo. Utilizzare UISlider o SwiftUI Slider per le regolazioni dei parametri come intensità, luminosità o saturazione.

Considerazioni di anteprima live

Utilizzare un con un dispositivo Metal per le migliori prestazioni.Ricendere l'immagine filtrata in un filetto di sfondo e aggiornare l'interfaccia utente sulla coda principale. Evitare di rendere a tutta la risoluzione dell'immagine originale durante le regolazioni in tempo reale; invece, utilizzare una versione downsampled per le anteprime e applicare la catena di filtro finale commettendo la risoluzione completa dell'utente.

Aggiungere la selezione delle immagini

Per consentire agli utenti di scegliere le immagini dalla loro libreria di foto, utilizzare [ o la più recente (introdotta in iOS 14). [ offre una moderna, asincrona API che rispetta la privacy degli utenti e supporta la selezione multipla.

Utilizzando PHPickerViewController:

Quando l'utente seleziona un'immagine, carica i dati dell'attività e crea un'UMERO. Converti questo UIImage in un CIImage usando per iniziare l'elaborazione. Per le immagini catturate direttamente dalla fotocamera, utilizzare .

Lavorare con CIImage e la Pipeline di elaborazione delle immagini

Core Image opera su oggetti , che sono rappresentazioni immutabili delle immagini. Un CIImage può essere creato da un'UMImage, un URL di file, dati di pixel grezzi o anche generato programmaticamente.

  1. Input:] Creare un CIImage dall'immagine di origine.
  2. Cina di filtraggio:[] Applicare uno o più oggetti CIFilter al CIImage. Ogni filtro modifica l'immagine in base ai suoi parametri.
  3. Realizzazione del testo:[] Usare un CIContext per rendere l'output finale CIImage in un CGImage o una texture Metal.
  4. Visualizza:] Convertire il CGImage in un istante e visualizzarlo nell'interfaccia utente.

Ecco un esempio di creazione di un CIImage da un UIImage e visualizzarlo:

Mantenendo il CIImage come oggetto di lavoro, è possibile incatenare filtri senza rendering intermedio, mantenendo le prestazioni e la qualità dell'immagine.

Comprensione del CIContext

è il motore di rendering per Core Image, che gestisce le risorse GPU o CPU e esegue l'elaborazione dei pixel.

Se stai rendendo molte immagini o eseguendo catene di filtri complesse, riutilizza un'unica istanza CIContext per evitare di ricreare le risorse GPU. Il contesto può essere creato una volta e utilizzato durante il ciclo di vita dell'app.

Applicare filtri immagine core

Core Image fornisce dozzine di filtri raggruppati in categorie come Regolazione del colore, Blur, Distorsione, Stylize e Transition. Ogni filtro è identificato da un nome di stringa come o ]. Per applicare un filtro, seguire questi passaggi generali:

  1. Creare un'istanza di CIFilter utilizzando .
  2. Impostare l'immagine di input utilizzando .
  3. Impostare i parametri specifici del filtro utilizzando le chiavi appropriate come , , o le chiavi personalizzate.
  4. Recuperare il CIImage di uscita dalla proprietà del filtro .

Esempio: Applicare un effetto vignette[

Dopo aver ottenuto il CIImage di uscita, renderlo a un CGImage utilizzando il CIContext:

Filtri comunemente usati per la modifica delle foto

  • CISepiaTone:[] Aggiunge una tinta di seppia calda. Parametro: (0.0 a 1.0).
  • CIPhotoEffectNoir:[] Converte in un look bianco e nero ad alto contrasto. Nessun parametro regolabile oltre all'immagine di ingresso.
  • CIGaussianBlur:[[]] Applica un blur gaussiano. Parametro: (pixel).
  • CIVignette:[] Oscuri i bordi dell'immagine. Parametri: e .
  • CIColorControls:[]] Regola luminosità, contrasto e saturazione. Parametri: , , .
  • CIExposureAdjust:[]] Regola l'esposizione. Parametro: (valore di esposizione).
  • I COLLEGATI:[]] Controlli evidenziati e ombre. Parametri: , .

Per un elenco completo dei filtri disponibili, consultare la documentazione CIFilter[] sul sito sviluppatore di Apple.

Costruire un sistema di anteprima filtro

Per consentire agli utenti di navigare visivamente i filtri, generare le anteprime per ogni filtro. Scampionare l'immagine originale a una dimensione più piccola (ad esempio, 200x200 punti) e applicare il filtro alla versione downsampled. Conservare l'UIImage risultante in un array e visualizzarlo in una visualizzazione di raccolta. Questo approccio fornisce feedback veloce senza consumare eccessiva memoria o potenza di elaborazione.

Catenaggio filtri multipli

Il core Image supporta la catena di filtri alimentando l'output di un filtro come l'ingresso all'altro. Poiché il CIImage è immutabile, è possibile catenare filtri senza effetti collaterali.

Esempio: Sepia Tone Seguito da una Vignette

Catena quanti filtri sono necessari, ma attenzione alle prestazioni. Ogni filtro aggiunge overhead computazionale, soprattutto quando si utilizzano le anteprime in tempo reale. Considerare l'utilizzo di una strategia di caching per i risultati intermedi se è necessario annullare i singoli passaggi di filtro.

Creazione di una linea di modifica non distruttiva

Per un'app di editing fotografico professionale, implementare un pipeline di editing non distruttivo. Conservare il CIImage originale e un elenco di filtri applicati con i parametri. Quando l'utente regola un parametro, ricostruire la catena del filtro dall'immagine originale e applicare tutti i filtri in ordine. Questo approccio preserva la qualità dell'immagine e consente all'utente di rivedere e modificare qualsiasi modifica precedente.

Migliorare l'esperienza utente con i controlli interattivi

I controlli interattivo rendono il processo di editing intuitivo e piacevole. Utilizzare UISlider per parametri continui come luminosità o raggio di sfocatura, e utilizzare UIStepper per cambiamenti discreti come incrementi di rotazione.

Esempio di cursore a tempo pieno:

Per il metodo , rendere la catena del filtro a un CIImage downsampled e aggiornare l'UIImageView sul thread principale.

Aggiungere Gesture di Confronto

Un utile modello UX è il confronto prima e dopo.Attuazione di un gesto di rubinetto e di trattenere che temporaneamente ritorna al display all'immagine originale, permettendo all'utente di vedere l'effetto delle loro modifiche. In alternativa, un cursore a vista split può rivelare metà dell'immagine originale e metà dell'immagine modificata.

Ottimizzazione delle prestazioni

Le prestazioni sono critiche per un'esperienza di editing fotografico fluido. Core Image è accelerata dalla GPU, ma l'uso inefficiente può ancora causare ritardo, soprattutto con immagini ad alta risoluzione da iPhone moderni.

  • Utilizzare un singolo CIContext:[] La creazione di più istanze CIContext è costosa.
  • Downsample per l'anteprima:[ Durante la modifica dal vivo, applicare filtri a una versione downsampled dell'immagine (ad esempio, 1024px sul lato più lungo).
  • Riportare in filetti di sfondo:[ Le operazioni Core Image sono sicure per thread. Eseguire il rendering su una coda di sfondo seriale e inviare gli aggiornamenti dell'interfaccia utente alla coda principale.
  • Usa Metal per il rendering:[] Crea il tuo CIContext con un dispositivo Metal per sfruttare l'accelerazione GPU: .
  • Cinee di filtro a due fili:[ Per le anteprime in tempo reale, tenere la catena di filtro breve. Se l'utente applica molti filtri, considerare di combinarli in un unico sottoclasse che esegue operazioni multiple in un unico passaggio.
  • Profilo con strumenti:[[]] Utilizzare lo strumento Strumenti di Xcode per identificare le strozzature delle prestazioni. I modelli Core Animation e GPU aiutano a visualizzare le prestazioni di rendering.

Gestione della memoria

Gli oggetti di intaglio possono contenere riferimenti a grandi buffer di immagine. Rilasciare oggetti di intaglio che non sono più necessari impostandoli a nil. Utilizzare piscine di autorelease in cappi di rendering stretti per mantenere l'utilizzo della memoria sotto controllo. Per immagini estremamente grandi, considerare la resa piastrellata utilizzando per elaborare l'immagine in piastrelle.

Caratteristiche avanzate

Per far emergere la tua app, consideri l'aggiunta di funzionalità avanzate oltre i filtri di base.

Cropping e rotazione

Per la rotazione, applicare o utilizzare [] per semplici rotazioni di 90 gradi. Fornire guide visive come un sovrapposizione della griglia e un rettangolo di ritaglio ridimensionabile. Conservare il retangolo di ritaglio come un CGRect e applicarlo come passo finale nella catena del filtro.

Regolazione di colori Curve e livelli

Core Image fornisce e per un'avanzata sfumatura di colore. Questi filtri accettano punti di controllo che definiscono curve di colore personalizzate, dando agli utenti esperti un controllo finemente ingranato sulla gamma tonale dell'immagine.

Rilevamento e potenziamento del viso

Integrare per il rilevamento del viso. Una volta rilevati i volti, è possibile applicare le regolazioni locali come la levigatura della pelle, la correzione degli occhi rossi o l'auto-enhancement. CIDetector fornisce i limiti per ogni faccia, che è possibile utilizzare per applicare filtri solo a regioni specifiche.

Risparmio ed esportazione

Dopo la completa modifica dell'utente, salvare l'immagine nella libreria di foto utilizzando []. Fornire opzioni per esportare in diversi formati (JPEG, PNG, HEIF) e risoluzioni. Usa [ o per scrivere i dati dell'immagine. Per condividere, utilizzare UIActivityViewController per consentire agli utenti di condividere i social media, messaggi o altre applicazioni.

Testare la tua App

Prova su una varietà di dispositivi iOS con diverse dimensioni dello schermo, potenza di elaborazione e risoluzioni della fotocamera. Utilizzare il simulatore per le iterazioni rapide, ma sempre testare su dispositivi fisici per le misurazioni accurate delle prestazioni. Prestare particolare attenzione all'utilizzo della memoria e alla frequenza del frame durante l'anteprima dal vivo.

Conclusioni

Con la comprensione del core Image pipeline, sfruttando i filtri incorporati, le operazioni di catena e ottimizzando le prestazioni in tempo reale, è possibile creare un tutorial che si sente professionale e reattivo. Inizia con i fondamentali qui delineati, quindi iterare sulle caratteristiche e il design per abbinare la tua visione.