Nell’attività di design e sviluppo di siti o altre applicazioni web sarà capitato a tutti di dover ritagliare (fare il “crop”) di immagini dalle varie proporzioni per trasformarle in immagini quadrate. Se le immagini sono poche si può fare a mano seza problemi ma se iniziano ad essere un centinaio diventa una rottura di scatole.

Ancora più un rompimento di maroni è quando in un CMS che abbiamo sviluppato o installato sono richieste foto quadrate per gli avatar o i profili utenti: immagini stretchate da far male a gli occhi, ritagli impossibili e inguardabili o inquadrature lontanissime che rendono tutto minuscolo.

Ma niente paura! Da oggi (anzi, già da qualche anno ma noi l’abbiamo scoperto da poco…) c’è uno script facile da usare quanto potente nei risultati: smartcrop.js di Jonas Wagner!

Che cosa fa?

Il solito cropping automatico – “stupido”, per dir così – di solito ritaglia semplicemente il centro dell’immagine, così:

bad

Evelyn by AehoHikaruki

smartcrop.js invece analizza il contenuto della foto per individuare l’area più interessante e centrare il ritaglio intorno a quella zona così da avere (quasi) sempre risultati molto più “intelligenti”:

smart

Fico, no?

Come funziona?

Lo script utilizza canvas per analizzare i contenuto dell’immagine che sta studiando, a cui applica questo algoritmo:

  1. Trova i contorni usando il metodo laplaciano
  2. Trova le aree con un colore vicino a quello della pelle umana
  3. Trova le aree con un’elevata saturazione
  4. Genera una serie di possibili  quadrati di ritaglio
  5. Ordina questi quadrati in base alla quantità di dettagli che ognuna copre, evitando i contorni
  6. Mostra il quadrato con  il “voto” più alto

Come si usa?

L’utilizzo è davvero semplice, basta una riga così:

dove image è qualsiasi cosa accettato da ctx.drawImage(), quindi un HTMLImageElement, HTMLCanvasElement o HTMLVideoElement.

Su https://github.com/jwagner/smartcrop.js si trova il sorgente e tutto ciò che serve per usare subito questo script oltre ad un immediato “testbed” dove fare tutte le prove che si desiderano con le nostre immagini.

Supporto e compatibilità

Come detto prima lo script utilizza canvas, funzionalità ormai diffusa e accettata da tutti i browser del mondo e quindi non c’è nessun problema di compatibilità e supporto.

Che cosa manca?

A mio modo di vedere questa fantastica idea potrebbe essere “potenziata” in due maniere:

  • integrando il meccanismo con quello utilizzato dai “cropper” attualmente più diffusi che ti permettono di ritagliare al volo le immagini definendo con il mouse il quadrato che vuoi. Mi immagino un sistema che usa smartcrop.js per suggerirti l’area da ritagliare (così se va bene devi solo cliccare su “ok”) ma ti consente comunque di variarla
  • per ora lo script è “stand-alone”, cioè non si integra con nessun CMS esistente. Se qualche anima pia avesse la voglia di impacchettarlo ad esempio in un plugin per WordPress, beh, credo che tutta la community gliene sarebbe infinitamente grato!

 

Happy (smart) cropping! :)

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis