Recortar imágenes dinámicamente con Vue.js

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:

import Vue from 'vue';
import Croppa from 'vue-croppa';

Vue.use(Croppa);

Importar desde el CDN

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

<link href="https://unpkg.com/vue-croppa/dist/vue-croppa.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue-croppa/dist/vue-croppa.min.js"></script>

Hecho esto la importamos a nuestra instancia de Vue:

Vue.use(Croppa);

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:

data: {
    myCroppa: {}
},

Una vez hecho esto agregamos el componente a la plantilla:

<croppa v-model="myCroppa"></croppa>

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>:

<croppa v-model="myCroppa" placeholder="Seleccionar imagen"></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:

saveImage(type, compressionRate) {
    this.myCroppa.generateBlob((blob) => {
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.download = 'filename';
        a.href = url;
        a.click();
        URL.revokeObjectURL(url);
    }, type, compressionRate)
}

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

<input type="button" @click="saveImage('image/jpeg')" value="Guardar">

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:

<croppa 
     v-model="myCroppa" 
     placeholder="Seleccionar imagen"
     canvas-color="white"
></croppa>

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

• Validación de imágenes con la nueva regla “dimensions” de Laravel 5.3
• Almacenamiento, streaming y descarga de archivos en Laravel 5.5
• Compresión de imágenes con laravel-elixir-imagemin y Gulp
• Curso de Vue 2

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

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Publicado por: David Palacios

Neuroscience nerd. No me gusta el small talk ni el ruido. Me gusta JavaScript y Vue. Tratando de aprender más cada día.

vue-croppa Vue.js