[iOs] Accesso alla fotocamera, alla Libreria e modifica di una foto con Aviary

Condivido qui un progettino xCode che esemplifica come accedere ad una foto salvata  nella Libreria Foto oppure scattata direttamente con la fotocamera del vostro device. Una volta prelevata la foto, è possibile modificarla, applicando su di essa vari effetti e filtri, grazie alla libreria Aviary (disponibile non solo per iOs, ma anche per Windows Phone, Android e HTML5).

Aviary-iOS-SDK_4

Ecco il link al mio progetto su GitHubhttps://github.com/fficetola/AviaryExample/

Quindi, ricapitolando, ecco le funzionalità che troverete nell’esempio:

  • visualizzazione di una foto, prelevata dalla Libreria Foto oppure dalla fotocamera del device, in una UIImageView
  • possibilità di modificarla grazie all’editor di Aviary
  • visualizzazione della foto in modalità fullscreen con gesture per lo zoom (pinch-on/pinch-off/double tap)
  • salvataggio dell’immagine modificata nella Libreria Foto

Procediamo per step, descrivendo le funzionalità su elencate (vi invito a visionare i file ViewController.m e BannerViewController.m  in cui vi è tutta la logica di questo tutorial).

 

1. Selezione di una immagine dalla Libreria Foto o dalla fotocamera

La selezione di una foto già salvata in Libreria o scattata dalla fotocamera avviene grazie al controller UIImagePickerController, il quale appare come una modale che a seconda del “source type” richiesto (camera o gallery), vi permetterà di importare appunto la foto da libreria o fotocamera.

- (void) selectPhoto:(UIImagePickerControllerSourceType) pickerType {

    picker = [[UIImagePickerController alloc] init];
    picker.delegate = self;

    picker.sourceType = pickerType;
    //picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    //picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

    [self presentModalViewController:picker animated:YES];

}

Il parametro in input al metodo selectPhoto è di tipo UIImagePickerControllerSourceType e può essere valorizzato con i seguenti valori:

  • UIImagePickerControllerSourceTypeCamera
  • UIImagePickerControllerSourceTypePhotoLibrary

I metodi di callback, che permettono di intercettare se l’utente ha selezionato o meno una foto, sono quelli dell’UIImagePickerControllerDelegate (metodi implementati nel ViewController):

#pragma mark - UIImagePicker Delegate

-(void)imagePickerControllerDidCancel:(UIImagePickerController *) photopicker {

    [photopicker dismissModalViewControllerAnimated:YES];

    [photopicker release];

}

- (void)imagePickerController:(UIImagePickerController *) photopicker didFinishPickingMediaWithInfo:(NSDictionary *)info {

    imageView.image = [info objectForKey:UIImagePickerControllerOriginalImage];
    [photopicker dismissModalViewControllerAnimated:YES];
    [photopicker release];

}

A cosa servono questi metodi del delegate?

  • imagePickerControllerDidCancel: permette di intercettare il click sul tasto Annulla del picker (o della libreria o della fotocamera), quindi senza che sia avvenuta la selezione della foto. In questo metodo viene chiuso il picker (con il dismissModalViewControllerAnimated)
  • didFinishPickingMediaWithInfo: permette di intercettare il click sul tasto Done con conseguente scelta della foto. Il recupero dell’immagine selezionata viene fatto accedendo alla proprietà UIImagePickerControllerOriginalImage del dizionario. Nell’esempio, tale foto viene inserita in una UIImageView per la visualizzazione.

 

2. Modifica dell’immagine con Aviary 

ios_aviary

Per poter modificare la foto, applicandovi  filtri ed effetti vari (cropping, resizing, rotating, ecc.), ho utilizzato la libreria Aviaryla cui versione “free” vi permette di eseguire tutte le features disponibili, ma non di trattare foto ad altissima risoluzione (vedi i dettagli nella sezione Pricing del sito www.aviary.com). Per maggiori dettagli sulle funzionalità previste, ecco la pagina della documentazione per iOshttp://www.aviary.com/ios/documentation

L’installazione della libreria Aviary nel vostro progetto è molto semplice:

  1. Innanzitutto scaricate il progetto di esempio direttamente dal sito ufficiale di Aviary: lo troverete nella sezione Documentazione, cliccando sul bottone GET CODE. Potete eseguirlo per vedere quali sono le features messe a disposizione dalla libreria o come esempio per implementare funzionalità più avanzate (visto che in questo tutorial vi spiego solo l’uso di base)
  2. Registratevi al sito (gratuitamente) per ottenere un’API key, che dovrete inserire all’interno del vostro progetto. Basta cliccare sul bottone GET API KEY della sezione Documentazione, registrarvi e poi aggiungere una nuova app. Vi verranno generate una API Key e una Secret Key ( a voi servirà solo la prima).
  3. Dal codice di esempio scaricato dal sito ufficiale, dovrete copiare la cartella AviarySDK e importarla nel vostro progetto. Questa contiene la libreria libAviarySDK.a, i file di Header e di Resources. Copiatela integralmente nel vostro progetto.
  4. inserite nel vostro progetto i seguenti framework, da cui Aviary dipende:
    1. Accelerate.framework
    2. AdSupport.framework (selezionare `Optional` invece di `Required`)
    3. CoreData.framework
    4. CoreText.framework
    5. libsqlite3.0.dylib
    6. libz.1.2.5.dylib
    7. Foundation.framework
    8. MessageUI.framework
    9. OpenGLES.framework
    10. QuartzCore.framework
    11. StoreKit.framework
    12. SystemConfiguration.framework
    13. UIKit.framework
  5. Infine, inserite nel vostro file MyProject-Info.plist la chiave Aviary-API-Key valorizzandola con l’API Key generata al punto 2.

Dopo la fase di configurazione della libreria, si passa all’utilizzo vero e proprio dell’editor. Innanzitutto il ViewController deve avere come delegate la classe AFPhotoEditorControllerDelegate, che ci permetterà di interagire con l’editor di Aviary, ossia con la classe AFPhotoEditorController.

Ecco come far apparire l’editor di Aviary in una modale del ViewController:

- (void)displayEditorForImage:(UIImage *)imageToEdit
{
    AFPhotoEditorController *editorController = [[AFPhotoEditorController alloc] initWithImage:imageToEdit];
    [editorController setDelegate:self];
    [self presentViewController:editorController animated:YES completion:nil];
}

Basta passare all’AFPhotoEditorController l’immagine da modificare (imageToEdit), in modo da farla apparire nell’editor. Qui Aviary vi permetterà di applicare gli effetti e i filtri disponibili. Per poter intercettare le modifiche o l’annullamento delle modifiche (chiusura con tasto Annulla dell’editor), basta implementare i seguenti metodi dell’ AFPhotoEditorControllerDelegate:

#pragma mark - Aviary Delegate

- (void)photoEditor:(AFPhotoEditorController *)editor finishedWithImage:(UIImage *)image
{

    //read modified image
    [imageView setImage:image];

    [self dismissViewControllerAnimated:YES completion:NULL];

}

- (void)photoEditorCanceled:(AFPhotoEditorController *)editor
{
    [self dismissViewControllerAnimated:YES completion:NULL];
}

Penso che le righe di codice precedenti siano abbastanza esplicative: photoEditorCanceled intercetta la chiusura di Aviary (tap su tasto Annulla) e permette di chiudere l’editor (dismissViewControllerAnimated), invece finishedWithImage permette di recuperare l’immagine modificata per riproporla nella UIImageView.

 

3. Zoom in/out dell’immagine (pinch-off/pinch-on o doppio tap per ingrandire/ridurre)

Per poter ingrandire/ridurre la foto visualizzata nell‘UIImageView, nel mio progettino di esempio trovate la classe BannerViewController.m. In essa vi è la logica per poter eseguire lo zoom-in e lo zoom-out della foto eseguendo le gesture pinch-on/pinch-off o il double tap sulla view. Inoltre, nel file BannerViewController.xib noterete una ScrollView contenente l’UIImageView, in cui visualizzare e zoomare l’immagine.

Ecco il codice:

-(void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {

    if(self.scrollView.zoomScale > scrollView.minimumZoomScale)
        [self.scrollView setZoomScale:scrollView.minimumZoomScale animated:YES];
    else
        [self.scrollView setZoomScale:scrollView.maximumZoomScale animated:YES];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.title = NSLocalizedString(@"BANNER_TITLE", nil);

    self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(closeModal:)]autorelease];

    UITapGestureRecognizer *tapTwice = [[[UITapGestureRecognizer alloc] initWithTarget:self  action:@selector(handleDoubleTap:)]autorelease];

    tapTwice.numberOfTapsRequired = 2;

    [self.view addGestureRecognizer:tapTwice];

    UIImage *imageFullScreen = image;
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.imageView setImage:imageFullScreen];

    //self.scrollView.contentSize = image.size;
    self.scrollView.delegate = self;
    //self.scrollView.minimumZoomScale = 10.0;
    self.scrollView.maximumZoomScale = 50.0;   

}

Nelle precedenti righe notiamo l’allocazione di un oggetto di tipo UITapGestureRecognizer per la registrazione del doppio “tap” sulla vista: la action associata a tale gesture è handleDoubleTap, che permette di zoomare alla scala massima o minima impostata per la ScrollView. Infatti, il minimumZoomScale e il maximumZoomScale si impostano nel viewDidLoad.

Invece, per gestire le gesture di pinch-on e pinch-off sull’immagine, sono utili le seguenti righe di codice:

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.scrollView.bounds),
                                      CGRectGetMidY(self.scrollView.bounds));
    [self view:self.imageView setCenter:centerPoint];
}

- (void)view:(UIView*)view setCenter:(CGPoint)centerPoint
{
    CGRect vf = view.frame;
    CGPoint co = self.scrollView.contentOffset;

    CGFloat x = centerPoint.x - vf.size.width / 2.0;
    CGFloat y = centerPoint.y - vf.size.height / 2.0;

    if(x < 0)
    {
        co.x = -x;
        vf.origin.x = 0.0;
    }
    else 
    {
        vf.origin.x = x;
    }
    if(y < 0)
    {
        co.y = -y;
        vf.origin.y = 0.0;
    }
    else 
    {
        vf.origin.y = y;
    }

    view.frame = vf;
    self.scrollView.contentOffset = co;
}

// MARK: - UIScrollViewDelegate
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return  self.imageView;
}

- (void)scrollViewDidZoom:(UIScrollView *)sv
{
    UIView* zoomView = [sv.delegate viewForZoomingInScrollView:sv];
    CGRect zvf = zoomView.frame;
    if(zvf.size.width < sv.bounds.size.width)
    {
        zvf.origin.x = (sv.bounds.size.width - zvf.size.width) / 2.0;
    }
    else 
    {
        zvf.origin.x = 0.0;
    }
    if(zvf.size.height < sv.bounds.size.height)
    {
        zvf.origin.y = (sv.bounds.size.height - zvf.size.height) / 2.0;
    }
    else 
    {
        zvf.origin.y = 0.0;
    }
    zoomView.frame = zvf;
}

 

4. Salvataggio dell’immagine nella Libreria Foto

Infine, per salvare la foto nella Libreria Foto del device, basta utilizzare la classe nativa UIImageWriteToSavedPhotosAlbum:

//Per salvare la foto modificata nella Gallery

-(void)image:(UIImage *)image finishedSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {

    if (error) {

        UIAlertView *message = [[UIAlertView alloc] initWithTitle:@"Salvataggio Fallito"
                                                          message:@" *ATTENZIONE* non è stato possibile salvare l'immagine"
                                                         delegate:nil
                                                cancelButtonTitle:@"OK"
                                                otherButtonTitles:nil];
        [message show];
    }
    else{
        UIAlertView *message = [[UIAlertView alloc] initWithTitle:@"Salvataggio effettuato con successo"
                                                          message:@"La tua foto è stata salvata nella Gallery"
                                                         delegate:nil
                                                cancelButtonTitle:@"OK"
                                                otherButtonTitles:nil];
        [message show];
    }
}

-(IBAction)savePhotoInGallery:(id)sender{

    //salvo la foto nella Gallery
    UIImageWriteToSavedPhotosAlbum(imageView.image, self, @selector(image:finishedSavingWithError:contextInfo:), nil);
}

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 


× 3 = sei