Crear filtros para las imágenes
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Gracias a la librería CSSGram podemos añadir filtros al estilo Instagram a nuestras imágenes de VueTalk.
- Primero la cargaremos de forma globa en nuestro
index.html
a través de la etiquetalink
con<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
. - Después podemos añadir la lista de filtros en nuestro módulo
messages
compo propiedadfilters
. - Acto seguido necesitaremos un nuevo modal que permite revisar la imagen y sus filtros antes de seleccionar uno. Lo llamaremos
FilterModalComponent
. - Hacemos uso de él en el método
onFileChange
de nuestra vistaViewRoom
.
async onFileChange(event) {
...
this.filter = await this.$store.dispatch("utils/requestConfirmation", {
props: {
message: "Select your filter",
file: this.message#Photo,
filters: this.$store.state.messages.filters
},
component: "FilterModal"
});
},
- Ahora debemos ajustar la acción
createMessage
del módulomessages
para que acepte la nueva propiedadaudio
.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.