Aplicați filtrele foto cu imaginea de bază în Swift

Puterea cadrului de bază a imaginilor

Imaginea de bază este o tehnologie de procesare și analiză a imaginilor concepută pentru a oferi procesarea în timp real a imaginilor statice și video în iOS și OS X. Apple a realizat câteva efecte foto pre-făcute, pe care le puteți utiliza cu ușurință pentru aplicațiile fotografice, nume precum Instant, Process, Sepia, Tonal, etc.

Core Image Reference

Biblioteca de dezvoltatori iOS oferă o explicație bună a prelucrării imaginilor de bază în Core Image Reference Collection.

Vă sugerez să verificați și pagina de Referință Filtru Imagine Core pentru a obține o listă completă a celor disponibile CIFilters. Rețineți că nu toate acestea sunt compatibile cu iOS; unele dintre ele lucrează doar pe OS X. 

Vom folosi următoarele filtre Core Image:

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

Notă:Acest tutorial este scris utilizând Xcode 7.3 și Swift 2.2, cu un obiectiv de implementare setat la 8.0, astfel încât aplicația dvs. să funcționeze și pe dispozitive mai vechi.

Să începem!

Creați un proiect și adăugați vizionări

Deschideți Xcode și creați un nou proiect, Aplicație de vizualizare single IOS. Alege Rapid ca limbă și universal pentru dispozitive. Veți primi un gol UIViewController în Storyboard și câteva .rapid fișiere: ViewController.swift și AppDelegate.swift.

Selectați controlerul din Storyboard și setați dimensiunea lui ca iPhone 3,5 inch în panoul din partea dreaptă, sub Metrici simulate. Acest lucru vă va ajuta să vă adaptați vizionările pentru iPhone 4S, dispozitivul Apple cu cea mai mică dimensiune a ecranului.

Nu vom folosi Auto Layout în acest tutorial, pentru că dezordinează machete pe dispozitive mai mari, cum ar fi iPad și iPad Pro. Dezactivați-l selectând Inspector de dosar și debifați Utilizați Auto Layout. Apoi faceți clic pe Dezactivați clasele de mărime buton din fereastra pop-up.

Acum găsiți o imagine JPEG - fie de pe web, fie de pe Mac - și trageți-o mai jos Assets.xcassets folder din panoul de navigare al proiectului. Vom folosi aceasta ca o imagine de probă la care ne putem aplica filtrele. Denumiți acest fișier imagine.jpg; o vom numi ulterior în cod.

Va trebui să trageți câteva vederi suplimentare în controler. Selectați biblioteca de obiecte din colțul din dreapta jos al Xcode și trageți a UIView în centrul ecranului. Redimensionați vederea la 320 x 320 px și centrați-o orizontal. 

Acum adăugați două UIImageViewîn Storyboard, găsindu-le în biblioteca de obiecte și trăgându-le în principal UIView. Redimensionați aceste vizualizări de imagini pentru a umple această vizualizare principală (vom examina modul de setare a proprietăților lor de autorezonare mai târziu). Atribui imagine.jpg la prima vedere a imaginii cu panoul de inspecție atribute.

Apoi trageți a UIScrollView în partea de jos a ecranului și setați lățimea sa pentru a se potrivi la lățimea controlerului. Puteți adăuga și a UILabel în partea de sus a controlerului și setați textul acestuia Filtre. Acesta va fi titlul aplicației dvs.. 

În cele din urmă, adăugați a UIButton în colțul din stânga sus al ecranului și faceți titlul acestuia Salvați.

Setați vizualizările pentru autorezonare și aspect

Inspectorul de mărimepanoul poate fi afișat făcând clic pe pictograma micilor câmpuri din colțul din dreapta sus al ecranului. Faceți acest lucru acum și începeți să editați dimensiunile de vizualizare selectând UIButton. Inspectorul de mărime vă va afișa coordonatele x și y pe ecran (rețineți că x este 0 în partea stângă a ecranului și y este 0 în partea de sus). Setați lățimea și înălțimea la 44 px.

Setați masca pentru autoreziere a butonului pentru a fi atașată la partea superioară și cea stângă a ecranului.

Acum, selectați toate celelalte vizualizări, unul câte unul, și ajustați dimensiunea și poziția acestora după cum urmează:

Titlul aplicației are o lățime de 320 px și o înălțime de 44 px și se atașează în partea de sus a ecranului.

Imaginile vizualizate au fiecare o lățime și o înălțime de 320 px.

În cele din urmă, vizualizarea derulării (pentru opțiunile de filtrare) are o lățime de 320 px și o înălțime de 80 px.

Declararea vizionărilor în fișierul .swift

Una dintre cele mai frumoase caracteristici ale Xcode-ului este posibilitatea de a împărți spațiul de lucru în două părți și să aveți Storyboard pe o parte și un fișier Swift pe cealaltă parte. Pentru a face acest lucru, trebuie să faceți clic pe Editor asistent pictograma din colțul din dreapta sus al ferestrei Xcode:

Dacă ale tale ViewController este selectat în Storyboard, secțiunea din dreapta va arăta automat rudă .rapid fişier. În cazul în care nu se întâmplă, puteți încerca să faceți clic pe meniul orizontal din partea de sus a fișierului rapid și să comutați Manual la Automat:

Acum, să ne atașăm unele dintre opiniile noastre ViewController.swift fişier. De la Schița documentelor panou, selectați UIView care conține cele două UIImageViews, țineți apăsat Control (sau butonul drept al mouse-ului) și trageți indicatorul mouse-ului dedesubt pentru a obține declarația de clasă a controlerului dvs. de vizualizare.

Eliberați butonul mouse-ului și va apărea un pop-up. Introduceți numele UIView-containerView-și faceți clic pe Conectați buton.

Tocmai ați adăugat o declarație pentru un IBOutlet de tip UIView pentru dumneavoastră .rapid fişier. Faceți același lucru pentru celelalte vizualizări de imagini: trageți linia albastră de sub fiecare instanță pe care o declarați și denumiți-o pe prima originalImage iar al doilea imageToFilter. Asigura-te ca originalImage este cea cu imagine.jpg ca imagine. 

Apoi conectați UIScrollView și numește-o filtersScrollView. Aceasta va stoca toate butoanele pentru aplicarea filtrelor în imagine.  

Vom declara noi UIButton mai târziu ca un IBAction. Acest buton ne va permite să salvăm imaginea filtrată în Biblioteca Foto a dispozitivului nostru.

Să codificăm!

Crearea unei matrice de filtre de imagine de bază

În Swift, puteți declara variabilele globale pur și simplu plasându-le în afara a clasă declarație, în cazul nostru, aceasta:

class ViewController: UIViewController  

Trebuie să creăm o gamă largă CIFilter nume:

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

După cum sa menționat la începutul acestui tutorial, trebuie să folosim numele originale ale filtrelor Core Image pentru ca aplicația noastră să le recunoască. Vom aloca aceste filtre butoanelor pe care le vom crea mai târziu, care vor aplica filtrul imaginii noastre.

Ascunderea barei de stare

De cele mai multe ori, poate doriți să ascundeți bara de stare de pe ecran. De la Xcode 7.0, nu mai este posibilă setarea proprietății ascunse a barei de stare în Info.plist, deci trebuie să adăugați această metodă chiar mai sus viewDidLoad (): 

override funcția preferăStatusBarHidden () -> Bool return true 

Crearea butoanelor de filtrare

viewDidLoad () metoda este o instanță implicită pe care Xcode o creează de fiecare dată când adăugați o .rapid fișier pentru proiectul dvs.; acesta este sunat atunci când ecranul și toate opiniile sale se încarcă. Dacă ați fi dorit să efectuați o acțiune chiar înainte de a se întâmpla, puteți folosi viewDidAppear () sau viewWillAppear () metode, dar nu este nevoie. Deci, să adăugăm câteva variabile de tip CGFloat chiar mai jos super.viewDidLoad ():

override functie viewDidLoad () super.viewDidLoad () var xCoord: CGFloat = 5 ani yCoord: CGFloat = 5 ani buton Lățime: CGFloat = 70 let buttonHeight: CGFloat = 70 ani gapBetweenButtons: CGFloat = 5

Aceste valori sunt necesare pentru a plasa un rând de butoane în interiorul nostru filtersScrollView. După cum puteți vedea în codul de mai sus, xCoord este poziția X în care va fi plasat un buton, yCoord este poziția Y, buttonWidth și buttonHeight sunt dimensiunile sale și gapBetweenButtons este spațiul dintre fiecare buton. 

Acum, trebuie să creați de fapt butoanele utilizând a pentru care va duplica un personalizat UIButton și plasați-o în filtersScrollView pe baza valorilor de mai sus. 

Plasați acest cod chiar sub acestea CGFloat instanțe:

 var itemCount = 0 pentru i în 0 ...  
Să vedem ce se întâmplă în acest cod. ITEMCOUNT este o variabilă pe care o vom folosi mai târziu pentru a adăuga butoanele noastre de filtrare ca subreviews ale filtersScrollView. Este posibil să observați că am declarat această variabilă cu var prefix. Asta pentru că va fi modificat de către pentru buclă. Dacă doriți să declarați constante în Swift, utilizați lăsa prefix, așa cum am făcut pentru filterButton.
Folosirea noului pentru loop sintaxa de Swift 2.2, nu avem nevoie pentru a scrie eu++ mai. Bucla va crește eu automat prin numărarea de la 0 la numărul elementelor din CIFilterNames mulțime.
Înăuntru pentru buclă, vom crea un buton personalizat, setați-l CGRect valori, să-i atribuiți o etichetă și să adăugați o acțiune destinație care să apeleze o funcție pe care o vom vedea mai târziu: filterButtonTapped ().
Pentru a face butonul nostru să arate frumos, cu colțuri rotunde, vom folosi strat proprietate și a stabilit raza de colț la 6. Apoi am clipul imaginea care urmează să fie conținut în limitele sale, altfel ar acoperi colțurile rotunjite.
Adăugați imaginea în butoanele și aplicați filtrele
Următoarea bucată de cod trebuie adăugată sub comentariul celui precedent:
 / / Crearea filtrelor pentru fiecare buton lăsați ciContext = CIContext (opțiuni: nil) let coreImage = CIImage (imagine: originalImage.image!) Filtru = CIFilter (nume: "\ (CIFilterNames [i] ) filter! .setValue (coreImage, pentruKey: kCIInputImageKey) permite filtraImageData = filter! .valueForKey (kCIOutputImageKey) ca! CIImage permite filtrulImageRef = ciContext.createCGImage (filteredImageData, dinRect: filteredImageData.extent) permite imageForButton = UIImage (CGImage: filteredImageRef);
Aici inițializăm a CIContext și CIImage pentru a permite companiei Core Image să lucreze originalImage (imagine.jpg) că fiecare buton va apărea. Atunci vom introduce o variabilă de tip filtru CIFilter care va fi numit de fiecare buton prin pentru buclă bazată pe CIFilterNames mulțime.
Al nostru filtru instanța trebuie să-și stabilească starea implicită și apoi să devină cheia de intrare pentru imagini. Apoi vom crea obiectul de date din acesta și referința sa de imagine, pe care o vom folosi pentru a crea un UIImage imediat ce va fi atașat butonului. 
Deoarece filtrele pe care le-am selectat pentru acest tutorial sunt pre-fabricate de Apple, nu trebuie să aplicăm nici o valoare suplimentară (cum ar fi intensitatea, culoarea etc.). Dacă doriți să obțineți informații despre altele CIFilters, puteți verifica pagina de referință a filtrelor de bază.
În ultima linie a acestei secțiuni, am setat în final imaginea de fundal a butonului pe care am creat-o anterior.
 // Alocați imaginea filtrată în butonul filterButton.setBackgroundImage (imageForButton, forState: .Normal) 
Adăugarea butoanelor la ScrollView 
Doar câteva linii pentru a ne completa viewDidLoad () metodă:
 // Adăugați butoane în vizualizarea Scroll xCoord + = ButonWidth + decalaj întreButtons filtersScrollView.addSubview (filterButton) // END FOR LOOP // Redimensionare Scroll View filtersScrollView.contentSize = CGSizeMake (butonWidth * CGFloat (itemCount + 2), yCoord) / END viewDescarcare ()
Adăugăm butoane ca viziuni secundare la filtersScrollView în funcție de poziția lor și de lățimea și spațiul pe care trebuie să le păstreze între ele. Apoi închidem în cele din urmă pentru buclă.
În cele din urmă, trebuie să setăm contentSize a noastră ScrollView pentru a se potrivi cu toate butoanele. Aici vom folosi în sfârșit ITEMCOUNT variabila declarată anterior, convertită la CGFloat (deoarece CGSizeMake nu acceptă Int valori).
Acțiunea butonului de filtrare
Aproape am terminat, cu doar câteva linii de cod!
În ViewController clasa, în afara viewDidLoad (), creați filterButtonTapper () funcţie. Acest lucru va fi sunat de fiecare dată când atingeți unul dintre butoanele pe care le-am generat înainte.
func filterButtonTapped (expeditor: UIButton) lăsați butonul = expeditor ca UIButton imageToFilter.image = button.backgroundImageForState (UIControlState.Normal)
Trebuie să creăm o instanță UIButton în primul rând, apoi setați imageToFilterimaginea bazată pe imaginea de fund a acelui buton, care a fost deja filtrată de codul plasat în viewDidLoad (). 
Asigurați-vă că UIImageView denumit imageToFilter suprapune originalImage, după cum se arată mai jos, în caz contrar, aplicația nu vă va afișa imaginea prelucrată, deoarece imaginea originală o va ascunde.
Salvarea imaginii prelucrate
Avem până la sfârșitul acestui tutorial și mai avem încă o funcție pe care să o adăugăm .rapid fişier. Acesta este butonul Salvare pe care l-am plasat anterior în Storyboard. ține Control și butonul mouse-ului, trageți o linie albastră din UIButton la un spațiu gol din cadrul clasei dvs., eliberați butonul mouse-ului și se va afișa un nou pop-up. Aici trebuie să schimbi Conexiune tip la Acțiune și introduceți numele metodei dvs. - în acest caz savePicButton-și faceți clic pe Conectați buton.
Ai creat un IBAction de data aceasta, și aici este codul care trebuie plasat în el:
 // Salvați imaginea în camera de filmare UIImageWriteToSavedPhotosAlbum (imageToFilter.image !, nil, zero, zero) let alert = UIAlertView (titlu: "Filtre", mesaj: "Imaginea ta a fost salvată în Photo Library", delegate: nil, cancelButtonTitle : "OK") alert.show () 
Prima linie salvează pur și simplu imaginea conținută în imageToFilter direct în Biblioteca foto a dispozitivului sau a Simulatorului iOS. Apoi, tragem un simplu UIAlertView care confirmă faptul că operațiunea a fost efectuată.
OK, hai să ne conducem aplicația și să vedem ce se întâmplă dacă atingem butoanele din partea de jos. Dacă ați făcut totul în mod corect, aplicația dvs. ar trebui să arate astfel:


Vă mulțumim pentru lectură și vă voi vedea data viitoare! Examinați câteva din celelalte tutoriale ale noastre despre dezvoltarea aplicațiilor Swift și iOS.



		
			
	   
	




Cod