venerdì 6 dicembre 2013

Manipolazione di immagini con CodeIgniter


CodeIgniter permette di manipolare le immagini con una apposita libreria, eseguendo le seguenti operazioni:
  • ridimensionamento
  • cropping
  • rotazione
  • aggiunta di watermark

Ridimensionamento

La image library viene caricata dal framework mediante l'apposita funzione del framework (load), con parametro un array di configurazione. A seconda della configurazione utilizzata può essere richiamata una funzione di manipolazione immagini. Ad esempio, per eseguire un ridimensionamento devono essere specificati i parametri width e height:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['maintain_ratio'] = TRUE;
$config['width'] = 75;
$config['height'] = 50;
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Ridimensiono l'immagine /percorso/mypic.jpg
$this->image_lib->resize();
Il listato precedente ridimensiona l'immagine sovrascrivendola. Se si preferisce mantenere l'immagine originale, creando una nuova immagine ridimensionata, è possibile utilizzare il parametro di configurazione new_image:
$config['new_image'] = '/percorso/nuovaimmaginediversa.jpg';

Rotazione

Una rotazione di una immagine può essere eseguita con 5 opzioni diverse:
  • 90 gradi
  • 180 gradi
  • 270 gradi
  • "hor'' (inversione orizzontale)
  • "vrt'' (inversione verticale)
Di seguito un esempio di codice per l'inversione orizzontale dell'immagine:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['rotation_angle'] = 'hor';

//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
$this->image_lib->rotate();

Cropping

Per ritagliare una immagine si può utilizzare la funzione crop specificando gli assi X e Y lungo i quali eseguire il cropping:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['x_axis'] = '100';
$config['y_axis'] = '60';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo il cropping 
$this->image_lib->crop();

Watermark

L'aggiunta di un watermark (filigrana) può avvenire attraverso due modalità, text (aggiunta di un testo all'immagine) e overlay (aggiunta di una piccola immagine in overlay all'immagine originale). Vediamo un esempio dell'ultimo caso, con una piccola immagine da inserire in basso a destra, con un padding di 5 pixel dai vertici:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'right';
$config['wm_padding'] = '5';
$config['wm_overlay_path'] = '/percorso/watermark.png';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo l'aggiunta del watermark
$this->image_lib->watermark();

Ora la risposta ad un problema che mi ha fatto sbattere un po' la testa prima di comprenderne la (ovvia) soluzione. Se voglio manipolare due immagini di fila, ma con una configurazione diversa? Notiamo nei listati precedenti come la libreria venga caricata dal metodo load con l'array di configurazione, ma questo deve avvenire solo una volta, dopodiché la libreria è già stata caricata all'interno dell'esecuzione di codeigniter. La risposta è l'utilizzo delle funzioni clear ed initialize, vediamone un esempio concreto:
//Impostazioni cropping
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['x_axis'] = '100';
$config['y_axis'] = '60';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo il cropping
$this->image_lib->crop();

//Cancello le impostazioni della libreria
$this->image_lib->clear();
//Impostazioni per rotazione orizzontale
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['rotation_angle'] = 'hor';

//Carico la libreria con la configurazione
$this->image_lib->initialize($config);
//Eseguo la rotazione
$this->image_lib->rotate();