Comparte en Facebook Twitter Google+

banner vue croppa

vue-croppa es una librería de Vue.js que nos permite recortar imágenes de forma dinámica directamente en el navegador. En este tutorial aprenderemos cómo usarla para que así podamos añadir esta funcionalidad a nuestras aplicaciones actuales y futuras.

Instalación y configuración

Podemos tanto instalar vue-croppa con NPM como usarlo directamente desde el CDN. A continuación veremos los pasos:

Instalación con NPM

Para instalar la librería con NPM ejecutamos en la terminal:

npm install --save vue-croppa

Luego en nuestro aplicación lo importamos:

Importar desde el CDN

Para agregar vue-croppa desde el CDN agregamos los siguientes enlaces a nuestro archivo HTML:

Hecho esto la importamos a nuestra instancia de Vue:

Usando la librería

Para usar la librería primero que nada agregamos un nuevo objeto en data. Este objeto almacenará toda los datos relacionados la imagen que esté siendo recortada:

Una vez hecho esto agregamos el componente a la plantilla:

Con esto ya podemos seleccionar una imagen y recortarla.

Cambiar el texto por defecto

Por defecto el texto es “Choose an image”. Para cambiarlo podemos hacer uso de la propiedad placeholder, simplemente agregándola al componente <croppa>:

Guardando los cambios

Hasta el momento podemos seleccionar una imagen y recortarla pero no guardar los cambios. Podemos fácilmente agregar dicha funcionalidad con un método:

Ahora en nuestra plantilla agregamos un botón con un evento click que llama al método saveImage cuando el botón es presionado:

Cambiar el color de relleno

Puedes observar que al guardar la imagen, ésta tiene un color de relleno negro. Podemos cambiar dicho color haciendo uso de la propiedad canvas-color. En este caso indicaremos que el color de relleno sea blanco:

Aprende más sobre Vue.js con nuestro libro La Elegancia de Vue 2 disponible en Leanpub

Leer más

Otras propiedades

A continuación una lista con algunas propiedades disponibles en vue-croppa. Para usarlas simplemente agrégalas al componente <croppa>:

  • width y height permite personalizar el tamaño del canvas.
  • placeholder-color permite cambiar el color del texto.
  • zoom-speed permite cambiar el valor del zoom al hacer scroll en la imagen.
  • accept permite indicar cuales tipos de imagen queremos aceptar (jpeg, png etc.)
  • disabled permite deshabilitar la selección de imágenes.
  • disable-drag-and-drop permite deshabilitar la funcionalidad de arrastrar y soltar.

En este tutorial aprendimos cómo podemos agregar una funcionalidad para recortar imágenes en nuestra aplicación. Para ver una lista completa de todas las opciones disponibles en vue-croppa puedes dar un vistazo a su repositorio de GitHub.

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.