Plugin jQuery para recorte de imágenes

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

El recorte online de imágenes está presente, cada vez, en mayor número de sitios web cuya finalidad es formar comunidades virtuales (redes sociales, páginas de contactos, etc). Consiste en que el usuario sube una fotografía (bien sea suya personal o de un paisaje, u otro contexto) y recorta, en la propia página, una parte de esa foto, que es la que realmente quiere compartir con el resto de la comunidad.

Esta técnica empezaron implementándola sitios tan relevantes en Internet como son Facebook y Google, aunque hoy en día se ha extendido como la pólvora. Imagina que tu tienes una fotografía en la que apareces con varios amigos. La subes a un sitio social como foto principal tuya, pero no quieres que aparezcan todos tus amigos, porque te diluyes en la multitud. Con el ratón, seleccionas la parte en la que estás tú, y decides que sólo esa parte es tu foto principal. La página web hace el recorte y te deja lo que tú has elegido.

En este artículo veremos cómo hacer esto.

ELIGIENDO EL PLUGIN

La forma cómoda y eficaz de implementar esta funcionalidad en nuestra web es mediante un plugin de jQuery. En Internet hay gran variedad de ellos (casi todos gratuítos) para poder elegir. Tantos que, a veces, la oferta confunde, y no sabes bien cual elegir.

Yo he probado bastantes y el mejor que he encontrado ha sido ImgAreaSelect, de Odyniec. A la hora de evaluar “el mejor”, he tenido en cuenta criterios como peso del plugin, facilidad de implementación y configuración, documentación exacta y suficiente, comportamiento estable en una batería de pruebas y, por supuesto, gratuidad. ImgAreaSelect ha desbancado cómodamente a los demás que he probado.

La forma implementar y configurar ImgAreaSelect puedes verla en el vídeo que aparece a continuación.

Después de que veas el vídeo podrás echarle un vistazo a la lista de opciones de configuración y uso que complementa este artículo.

OPCIONES DEL PLUGIN

OPCIÓN USO
aspectRatio Fuerza una relación de aspecto entre la anchura y la altura de la zona seleccionada. Por ejemplo, el valor 1:1 hará que la zona seleccionada de la imagen sea siempre cuadrada. El valor 16:9 hará que la zona seleccionada de la imagen sea siempre panorámica de dieciséis novenos. Puedes fijar los valores de anchura y altura que desees. Si no se establece esta propiedad, la selección es libre.
autoHide Si se establece a true la selección desaparece al terminar de seleccionar. El valor por defecto es false. Recomendamos no cambiarla.
classPrefix Una cadena que se antepone a los nombres de clases asignadas a los elementos del plugin. El valor por defecto es imgareaselect.
disable Se puede poner a true en programación para desactivar el plugin bajo determinadas circunstancias. El valor por defecto es false.
enable Cuando se pone a true se reactiva el plugin, si fué desactivado con la propiedad anterior.
fadeSpeed Si se le pone un valor numérico se establece un desvanecimiento en milisegundos al aparecer o desparecer la capa que cubre la zona no seleccionada del plugin. El valor por defecto es false.
handles Si se pone a true se muestran los manejadores en las esquinas y los laterales de la zona seleccionada, como hemos visto en el vídeo. Se puede establecer el valor corners, y sólo se verán manejadores en las esquinas. El valor por defecto es false.
height Contiene la altura de la zona seleccionada. Es un valor numérico y se entiende en píxeles.
hide Si se establece a true se oculta la zona seleccionada.
imageHeight Se establece con un valor numérico, entendido en píxeles, que indica la altura real de la imagen, si esta se muestra reescalada en la página.
imageWidth Se establece con un valor numérico, entendido en píxeles, que indica la anchura real de la imagen, si esta se muestra reescalada en la página.
instance Si se establece a true, al aplicar el plugin a una imagen se devuelve un objeto sobre el que, posteriormente, se pueden modificar propiedades o ejecutar métodos por programación.
keys Si se establece a true, se puede redimensionar o desplazar la zona seleccionada de la imagen mediante el teclado. El valor por defecto es false. Mi experiencia es que usar el teclado es más incómodo que el ratón, aunque proporciona mayor precisión.
maxHeight La altura máxima de la selección en píxeles. Si no se establece, coincide con la altura de la imagen.
maxWidth La anchura máxima de la selección en píxeles. Si no se establece, coincide con la anchura de la imagen.
minHeight La altura mínima de la selección. 
minWidth La anchura mínima de la selección.
movable Determina si la selección puede moverse sobre la imagen (como se ve en los ejemplos del vídeo) o no. El valor por defecto es true. Si queremos evitar que se pueda mover la selección lo estableceremos a false (no lo aconsejo por la limitación que supone para el usuario). 
parent Un objeto jQuery o selector de elemento del que “colgará”, jerárquicamente, el objeto creado con el plugin. El valor por defecto es body. Normalmente, salvo casos muy especiales, no necesitarás cambiarlo.
persistent Si se establece a true, no se eliminará la selección al pulsar fuera del área seleccionada. El valor por defecto es false.
remove Si se establece a true desactiva el plugin de la imagen a la que estuviera asociado de forma permanente. El valor por defecto es false.
resizable Determina si la zona seleccionada de la imagen será reescalable. El valor por defecto es false.
resizeMargin Espacio, en píxeles, con respecto a los límites de la zona seleccionada, donde se puede usar el ratón para tirar de los bordes y reescalar la selección.
show Si se pone a true (valor por defecto), se muestra la zona seleccionada de la imagen.
width Anchura, en píxeles, de la zona seleccionada.
x1, y1 Indica, o establece, las coordenadas X e Y de la esquina superior izquierda de la zona seleccionada, con respecto a la esquina superior izquierda de la imagen.
x2, y2 Indica, o establece, las coordenadas X e Y de la esquina inferior derecha de la zona seleccionada, con respecto a la esquina superior izquierda de la imagen. Como ves, en ambos casos se toma, como referencia 0, 0 la esquina superior izquierda de la imagen sobre la que se hace la selección.
zIndex El valor de z-index que se asigna a la zona seleccionable de una imagen. Normalmente funciona bien de modo automático pero, bajo determinadas circunstancias, es necesario establecerlo para que la selección quede “por encima” de la imagen.

Cómo ves, hay muchas propiedades que, en general, no necesitarás nunca. En el tutorial en vídeo aparecen las más habituales.

EVENTOS

Los eventos permiten detectar las acciones del usuario sobre la imagen que se ha creado como recortable aplicándole el plugin. En el vídeo tienes algunos ejemplos. Los eventos que contempla este plugin son los siguientes:

EVENTO USO
onInit Detecta la inicialización de un objeto, cuando se aplica el plugin sobre una imagen.
onSelectStart Detecta cuando se inicia una selección, es decir, cuando se pulsa el botón izquierdo del ratón sobre la imagen con el plugin y se empieza a arrastrar para seleccionar un área.
onSelectChange Detecta cada cambio de la selección. Esto se refiere a cuando está pulsado el botón izquierdo del ratón sobre la imagen, y se está reescalando la selección, o cuando está pulsado el botón izquierdo del ratón sobre la selección, y se está desplazando esta.
onSelectEnd Detecta cuando se finaliza un cambio en la selección, es decir, cuando se suelta el botón izquierdo del ratón dando por terminado el escalado o desplazamiento de la selección. 

Los eventos se emplean para programar funciones de callbak que se ejecutan como respuesta a los mismos.

MÉTODOS

El plugin cuenta, además, con ciertos métodos que aumentan su funcionalidad:

MÉTODO USO
getOptions() Devuelve un objeto con las opciones establecidas, cada una con el valor que tenga en el momento de usar el método.
setOptions() Permite establecer opciones del plugin pasándole, cómo argumento, un objeto con las opciones a establecer.
getSelection() Obtiene un objeto con los valores que determinan la selección actual.
setSelection() Establece una selección sobre la imagen por programación, sin intervención del usuario. Recibe, como argumentos, los valores de X1, Y1, X2 e Y2 de la selección (en píxeles). Este método sólo establece la selección “internamente”, sin visualizarla sobre la imagen. Para que se visualice hay que aplicar, inmediatamente después, el método update().
cancelSelection() Cancela la selección actual.
update() Visualiza la selección establecida con setSelection().

LOS EJEMPLOS

Los ejemplos de uso que aparecen en el vídeo cubren el empleo que le darás al plugin en la mayor parte de los casos. Te los puedes descargar pulsando este enlace.

     

2 comentarios:

  1. Este plugin lo puedes usar para un formulario desde el cual se sube una imagen?
    o seria usar otro plugin adicional para esto?

    • Realmente, el plugin está creado para recortar una imagen cuando esta ya está alojada en el servidor, por lo que no encajaría en el formulario, sino en la respuesta del mismo. Cuando envías el formulario, puedes pasar al usuario a una página donde se le muestre la imagen que ha subido, y se le de opción a recortarla.
      Si no quieres que el usuario note este doble paso, puedes subir la imagen por ajax desde el mismo formulario (lo que resulta transparente al usuario) y, como ya está subida, se la puedes mostrar al usuario para que la recorte en dicho formulario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *