00:00:00

Thumbor

APSL

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

¿Qué es thumbor?

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Documentación

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

¿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/
  • 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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Imagen original

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Redimensión y recorte

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Rotado

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Volteado

  • /unsafe/-520x-200/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Luminosidad

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Contraste

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Desenfocado

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Marca de agua

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Esquinas redondeadas

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Múltiples filtros

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Orden de los filtros

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Cargadores

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • Modo "smart"
  • Extrae información de la imagen para mejorar los procesados
  • Utiliza OpenCV
  • Detectores focales, faciales, ...

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/550x200/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/550x200/smart/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Original

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/550x200/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/550x200/smart/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Original

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/400x200/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente

  • /unsafe/400x200/smart/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Procesado inteligente (debug)

  • /unsafe/debug/550x200/smart/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Extraer puntos focales (original)

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Extraer puntos focales

  • /unsafe/300x100/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Extraer puntos focales (seleccionar foco)

  • /unsafe/100x150:300x200/

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Extraer puntos focales (utilizar foco para recortar)

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Seguridad

  • Modo seguro
    • Se genera la URL cifrando con una clave
    • Libthumbor
    • /LYlJ76NKiy2HAQ9RZR8iqIOTHGE=/300x150/smart/
  • Modo inseguro
    • /unsafe/
    • Cualquiera puede redimensionar
  • Se puede restringir vía ALLOWED_HOSTS

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Libthumbor

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'
)

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

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

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz

Gracias

  • Eso es todo amigos

Notes

Thumbor · Abril 2014 · apsl.net · @eduherraiz