# Thumbor
## APSL

.fx: titleslide

---

# ¿Qué es thumbor?

* Servidor de imágenes
* Escrito en python
* Recoge
* Procesa (filtro, redimensión, recortado, marca de agua, ...)
* Entrega

---

# Documentación

* [Wiki de github](https://github.com/thumbor/thumbor/wiki/Usage)
* [Propio código](https://github.com/thumbor/thumbor)
* [thumbor.org](http://thumbor.org)

---

# ¿Cómo funciona?


* http://thumbor-server/unsafe/550x200/http://dominio.com/imagen.jpg
* Todo se basa sobre la URL que llega a thumbor
* Carga
* Filtros y parámetros
* [http://thumborize.me/](http://thumborize.me/)
* En los ejemplos de esta presentación:
    * Obviamos la partes de thumbor-server y carga de imagen
    * Todas las imagenes se cargan vía thumbor


---

# Imagen original

<img src='http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Redimensión y recorte

* Se especifica el tamaño que queremos en el **primer ** parámetro
* /unsafe/550x200/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Rotado 

* /unsafe/320x200/filters:rotate(90)/

<img src='http://thumbor.eduherraiz.com/unsafe/320x200/filters:rotate(90)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Volteado

* /unsafe/-520x-200/

<img src='http://thumbor.eduherraiz.com/unsafe/-520x-200/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Luminosidad

* /unsafe/550x200/filters:brightness(40)/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/filters:brightness(40)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Contraste

* /unsafe/550x200/filters:contrast(120)/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/filters:contrast(120)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Desenfocado

* /unsafe/550x200/filters:blur(7)/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/filters:blur(7)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Marca de agua

* /unsafe/550x200/filters:watermark(http://$URL/apsl.png,-10,-10,30)/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/filters:watermark(http://www.apsl.net/static/apslweb2/nivo/themes/apslorman/apsl.png,-10,-10,30)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />
    
---

# Esquinas redondeadas

* /unsafe/550x200/filters:round_corner(20,255,255,255)/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/filters:round_corner(20,255,255,255)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Múltiples filtros

* Se pueden encadenar filters con ":"
* /unsafe/-550x-200/filters:contrast(120):blur(3)/

<img src='http://thumbor.eduherraiz.com/unsafe/-550x-200/filters:contrast(120):blur(3)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

--- 

# Orden de los filtros

* **OJO**, el orden de los filtros es relevante
* /unsafe/-550x-200/filters:blur(3):contrast(120)/

<img src='http://thumbor.eduherraiz.com/unsafe/-550x-200/filters:blur(3):contrast(120)/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Cargadores

* Via URL:
    * Thumbor tiene dos empaquetados:
        * Cargador http (http_loader)
        * Cargador por archivo (file_loader)
    * [Puedes hacer tuyo custom siguiendo la misma estructura](https://github.com/APSL/thumbor_aws/blob/master/thumbor_aws/loaders/s3_loader.py)
* Vía API
    * [Les pasas el fichero binario vía POST](https://github.com/thumbor/thumbor/wiki/How-to-upload-images)
    * Un cargador integrado con Django

---
            
# Procesado inteligente

* Modo "smart"
* Extrae información de la imagen para mejorar los procesados
* Utiliza [OpenCV](http://opencv.org/)
* Detectores focales, faciales, ...

---

# Procesado inteligente

* /unsafe/550x200/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Procesado inteligente

* /unsafe/550x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/smart/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Procesado inteligente (debug) - /unsafe/debug/550x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/debug/550x200/smart/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg' />

---

# Original

<img src='http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_tienda3.jpg' />

---

# Procesado inteligente

* /unsafe/550x200/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_tienda3.jpg' />

---

# Procesado inteligente

* /unsafe/550x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/550x200/smart/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_tienda3.jpg' />

---

# Procesado inteligente (debug) - /unsafe/debug/550x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/debug/550x200/smart/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_tienda3.jpg' />

---

# Original

<img src='http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_w.jpg' />

---

# Procesado inteligente

* /unsafe/400x200/

<img src='http://thumbor.eduherraiz.com/unsafe/400x200/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_w.jpg' />

---

# Procesado inteligente

* /unsafe/400x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/400x200/smart/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_w.jpg' />

---

# Procesado inteligente (debug)

* /unsafe/debug/550x200/smart/

<img src='http://thumbor.eduherraiz.com/unsafe/debug/400x200/smart/http://www.ushuaiabeachhotel.com/media/ushuaia2015/calltoaction/49_w.jpg' />

---
       
# Extraer puntos focales (original)

<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/546px-Turkish_Van_Cat.jpg' />

---
    
# Extraer puntos focales

* /unsafe/300x100/

<img src='http://thumbor.eduherraiz.com/unsafe/300x100/https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/546px-Turkish_Van_Cat.jpg' />

---
    
# Extraer puntos focales (seleccionar foco)

* /unsafe/100x150:300x200/

<img src='http://thumbor.eduherraiz.com/unsafe/100x150:300x200/https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/546px-Turkish_Van_Cat.jpg' />

---

# Extraer puntos focales (utilizar foco para recortar)

* /unsafe/300x100/filters:extract_focal()/$URL/unsafe/100x150:300x200/

<img src='http://thumbor.eduherraiz.com/unsafe/300x100/filters:extract_focal()/thumbor.eduherraiz.com/unsafe/100x150:300x200/https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/546px-Turkish_Van_Cat.jpg' />

---
    
# Seguridad
    
* Modo seguro
    * Se genera la URL cifrando con una clave
    * [Libthumbor](https://github.com/thumbor/libthumbor/wiki/Usage)
    * /LYlJ76NKiy2HAQ9RZR8iqIOTHGE=/300x150/smart/
* Modo inseguro
    * /unsafe/
    * Cualquiera puede redimensionar
* Se puede restringir vía ALLOWED_HOSTS

---

# Libthumbor

    !python
    from libthumbor import CryptoURL
    crypto = CryptoURL(key='my-security-key')

    encrypted_url = crypto.generate(
        width=300,
        height=200,
        smart=True,
        image_url='/path/to/my/image.jpg'
    )
    
---    

# Muchas cosas más
    
* Control de errores con Sentry integrado
* Encolado de procesos
    * Tarea en segundo plano para procesados smart
    * Se devuelve sin smart mientras se genera
* Muy adaptable
* Escalable

--- 

# Gracias

* Eso es todo amigos