‫-: En este video, aprenderá sobre el procesamiento y
‫la manipulación de imágenes con Node JS, y
‫en este caso particular,
‫cambiaremos el tamaño y convertiremos nuestras imágenes.
‫Entonces, en todas partes de nuestra
‫interfaz de usuario asumimos que las imágenes cargadas son cuadrados.
‫Para que luego
‫podamos mostrarlos como círculos como este.
‫Y esto solo funciona cuando son cuadrados,
‫pero por supuesto,
‫en el mundo real, los usuarios rara vez
‫subirán imágenes que sean cuadrados.
‫Entonces, nuestro trabajo ahora es
‫cambiar el tamaño de las imágenes para convertirlas en cuadrados.
‫Muy bien, así es como vamos a hacer eso.
‫Agregaremos otro middleware antes de la actualización y luego
‫ese middleware se encargará
‫del procesamiento real de la imagen.
‫Muy bien, hagámoslo aquí en el código
‫inmediatamente después
‫de este, porque están conectados, ¿no?
‫Entonces, exporta puntos,
‫cambia el tamaño de la foto de usuario.
‫Y antes de continuar, agreguemos este
‫middleware a la pila de middleware en esta
‫ruta en particular.
‫Eso está en las rutas
‫de los usuarios, y aquí, justo después de
‫que la
‫foto se haya cargado en este middleware, la redimensionaremos.
‫Así que cambie el tamaño, y aquí está
‫el controlador de usuario.
‫Bien.
‫De hecho,
‫bajemos aquí y regresemos.
‫Y entonces, en este punto, ya tenemos
‫el archivo de nuestra solicitud.
‫Al menos si hubo una carga,
‫y si no hubo
‫carga, entonces, por supuesto, no queremos hacer nada.
‫Eso significa que queremos pasar al siguiente middleware.
‫Entonces, si no hay ningún
‫archivo en la solicitud, regrese de inmediato y pase a la siguiente.
‫Está bien, pero por lo demás, por supuesto,
‫queremos cambiar el tamaño de la imagen.
‫Y para eso usaremos el paquete sharp.
‫Bien.
‫Bueno, primero que nada, instalémoslo.
‫Así que MPM instala sharp. Muy
‫bien, y como está haciendo su trabajo, sigamos
‫adelante y pongamos eso aquí.
‫Tan
‫agudo, y requiere, agudo.
‫Y sharp es una biblioteca de
‫procesamiento de imágenes realmente agradable y fácil de usar para Node Js. Y
‫hay muchas cosas que podemos
‫hacer con ella.
‫Pero donde realmente brilla es en el
‫cambio de tamaño de las imágenes de una forma muy sencilla.
‫Y eso es exactamente lo que estamos buscando aquí.
‫Bien.
‫Entonces, decimos sostenido y luego aquí básicamente
‫necesitamos pasar el archivo.
‫Ahora, al realizar un procesamiento de imágenes
‫como este justo después de
‫cargar un archivo, siempre es mejor ni siquiera guardar
‫el archivo en el disco, sino guardarlo en la memoria.
‫Ya hablamos de eso antes, por
‫lo que ahora es en realidad hacerlo en la práctica.
‫Bien, para eso necesitamos cambiar un poco
‫o la configuración del multer y, en
‫realidad, solo este almacenamiento del
‫multer, porque ahora ya no necesitamos nada de esto.
‫Y en lugar de
‫un almacenamiento múltiple, será simplemente un almacenamiento de memoria de múltiples puntos.
‫Y así, ¿de acuerdo?
‫Y así, como mencioné
‫anteriormente, de esta manera la imagen se almacenará como un búfer.
‫Y entonces ese búfer está disponible a
‫petición del búfer de puntos del archivo de puntos y esto es mucho más
‫eficiente así, así que en lugar de tener
‫que escribir el archivo en el disco y luego
‫leerlo aquí de nuevo.
‫Simplemente guardamos la imagen básicamente en la
‫memoria y luego aquí podemos leer eso, ¿de acuerdo?
‫De todos modos, llamar a la
‫función sharp como esta aquí creará un objeto en el
‫que podemos encadenar múltiples métodos para hacer nuestro procesamiento de imágenes.
‫Entonces, el primero que vamos a hacer es cambiar el tamaño.
‫Entonces, cambie el tamaño, y luego aquí podemos especificar
‫el ancho y el alto.
‫Entonces, digamos 500 y 500, recuerde que queremos imágenes
‫cuadradas y, por supuesto, la
‫altura debe ser la misma que
‫el ancho.
‫Ahora, esto recortará la
‫imagen para que cubra este cuadrado completo de 500 veces 500.
‫Y, de hecho,
‫podemos cambiar este comportamiento predeterminado si quisiéramos.
‫Y entonces, nuevamente, echemos un vistazo rápido
‫a la documentación.
‫Digamos, github sharp, pero en realidad su propio sitio
‫web es un poco
‫mejor, un poco más completo.
‫Entonces, hagamos clic en ese enlace aquí, y luego aquí podemos
‫cambiar el tamaño, que es lo que
‫estamos haciendo actualmente y luego
‫esto es de lo que estaba hablando.
‫Muy bien, lo predeterminado aquí es que
‫la imagen se recortará
‫para cubrir las dos dimensiones proporcionadas.
‫Pero también podemos elegir contener, llenar, adentro o afuera.
‫Y lo haríamos configurando las opciones aquí.
‫Entonces podemos establecer el ancho, el alto y luego, como
‫tercera opción, podemos establecer este
‫objeto de opciones donde luego podemos definir el ajuste.
‫También podríamos definir la posición, que es
‫el centro por defecto.
‫Verá que hay todo tipo
‫de cosas que realmente podríamos definir para ajustar nuestro
‫procesamiento de imágenes.
‫Pero en este caso, lo que tenemos es suficiente.
‫Pasemos al siguiente paso.
‫Porque lo que quiero hacer a
‫continuación es convertir las imágenes siempre a jpeg, ¿de acuerdo?
‫Y para eso, usamos para formatear,
‫y luego jpeg.
‫Luego también podemos definir la calidad de este jpeg.
‫Básicamente, para comprimirlo un
‫poco para que no ocupe
‫tanto espacio y para eso, usamos el método
‫jpeg, y configuramos una opción en este objeto con calidad y digamos
‫90 por ciento aquí, ¿de acuerdo?
‫Entonces, cada método en su propia línea
‫aquí es mucho mejor, pero en realidad no hemos terminado.
‫Ya casi terminamos, pero no del todo.
‫Porque ahora, al
‫final, finalmente queremos escribirlo en un archivo en nuestro disco.
‫Y para eso, podemos usar para archivar, ahora
‫este método aquí realmente
‫necesita la ruta completa al archivo.
‫Entonces, básicamente, imágenes
‫públicas, barra, usuarios y, finalmente, aquí
‫el nombre del archivo, ¿de acuerdo?
‫Así que obtengamos eso
‫de lo que teníamos aquí antes.
‫Porque, por supuesto, queremos que nuestras imágenes
‫tengan un formato similar.
‫Muy bien, copiemos eso.
‫Pero en realidad no lo pondré aquí.
‫En su lugar, lo
‫guardaré para solicitar el nombre del archivo dot.
‫Ahora, ¿por qué lo hago así?
‫Bueno, es porque en este momento este nombre
‫de archivo no está definido.
‫Entonces, cuando decidimos guardar la imagen en la memoria como un búfer, el
‫nombre del archivo no se configurará realmente, pero realmente necesitamos
‫ese nombre de archivo
‫en nuestra otra función de middleware, ¿verdad?
‫Así que eso está aquí para actualizarme aquí mismo.
‫Así que confiamos en la solicitud del nombre del archivo del
‫archivo de puntos para guardar el nombre del archivo en nuestra base de datos, ¿verdad?
‫Y entonces, en realidad, deberíamos definir eso.
‫Y así, anteriormente, por supuesto, estaba
‫definido por la carga de multer que teníamos,
‫pero como eso ya no existe, básicamente deberíamos redefinirlo aquí.
‫¿Okey?
‫Entonces aquí, de hecho, podemos deshacernos
‫de esta parte de la extensión, porque
‫ya sabemos que siempre será un jpeg.
‫Debido a esto para formatear, ¿de acuerdo?
‫Y aquí, simplemente podemos poner jpeg.
‫Por lo que no es necesario obtener la extensión del archivo.
‫Y ahora
‫aquí, podemos usar eso.
‫Req. Archivo de puntos. Nombre de archivo de puntos, y
‫eso es todo.
‫¿Okey?
‫Entonces, todo lo que tenemos
‫que hacer ahora para terminar es llamar al siguiente middleware de la pila.
‫Y esa será la función de controlador de actualización.
‫Así que, por supuesto, ahora probemos eso.
‫Entonces, ya no necesitamos este.
‫Vayamos aquí a Postman, y
‫ahora creo que
‫el usuario que quiero actualizar se llama arrav.
‫Echemos un vistazo aquí a nuestros datos muy rápido.
‫Y sí, entonces esta es la imagen no cuadrada
‫que vamos a subir ahora y
‫en realidad ves el tamaño
‫aquí, que es 1000 veces 1500, así que
‫luego comparemos eso con nuestra
‫imagen cargada redimensionada.
‫Bien.
‫De todos modos, ahora obtengamos el nombre
‫de arrav. En realidad, no los necesitamos, siempre son los
‫mismos, así que arrav es como este, así que inicie sesión.
‫Para que luego podamos actualizarlo
‫y verá que en este momento la imagen aquí es el usuario 11.
‫Y solo para verlo
‫un poco mejor, actualicémoslo,
‫inicie sesión en nuestra aplicación web usando ese
‫usuario.
‫Así que prueba uno, dos, tres, cuatro.
‫Muy bien, esa es la imagen actual
‫y ahora vamos a actualizarla.
‫Seleccione archivos, y aquí está nuestra
‫imagen, abra eso y veamos qué sucede.
‫Y hemos terminado.
‫En realidad, fue muy
‫rápido, así que veamos si es correcto.
‫Bueno, al menos el nombre aquí parece correcto.
‫Si echamos un vistazo a nuestros usuarios ahora aquí, es
‫en público o aquí mismo.
‫Entonces ese debería ser el que en realidad
‫no lo es.
‫Y en realidad no se encuentra por ninguna parte.
‫Recarguemos, ah, y
‫aquí está.
‫Ahora, ese es el indicado.
‫Entonces, ves que ahora es 500 veces 500, es
‫mucho más pequeño
‫aquí, por lo que 55 en comparación con los 315 que teníamos antes.
‫Así que eso
‫es mucho mejor y, como verá aquí,
‫ahora también debería actualizarse aquí.
‫Y eso es perfecto.
‫Entonces, la cara está en el medio aquí.
‫Así que el cambio de tamaño fue perfecto.
‫Frio.
‫Y espero que también encuentre
‫algún uso para este tipo de
‫procesamiento de imágenes en sus propias aplicaciones.
‫Así que para recapitular rápidamente lo que hicimos aquí.
‫Bueno, creamos una nueva función de middleware que
‫se ejecutará justo después de que
‫se cargue la foto.
‫Y esa carga ahora está sucediendo
‫en un búfer y ya no directamente en el sistema de archivos.
‫¿Derecha?
‫Y es por eso que usamos este almacenamiento
‫de memoria aquí, pero, por supuesto, este filtro multer
‫aquí todavía está funcionando.
‫Entonces, solo podemos subir imágenes, ¿de acuerdo?
‫Entonces, aquí en ese middleware, colocamos el nombre de
‫archivo de esa imagen en el
‫nombre de archivo de punto de archivo de
‫solicitud para que podamos usarlo en la actualización.
‫Muy bien, y aquí tenemos el
‫procesamiento de la imagen real.
‫Donde primero lo cambiamos de tamaño a un
‫cuadrado y luego lo
‫formateamos a un jpeg con una calidad del
‫90 por ciento, y finalmente luego escribimos ese archivo
‫en nuestro sistema de archivos exactamente en la misma carpeta que especificamos también antes.
‫Muy bien, así es como funciona cuando necesitas
‫algo de procesamiento de
‫imágenes, pero si no lo necesitas, entonces,
‫por supuesto, puedes seguir usándolo de esta manera, ¿de acuerdo?
‫Y por eso es realmente importante
‫que hayamos aprendido
‫a hacerlo de ambas formas aquí.
‫Muy bien, a continuación, en el
‫siguiente video, haremos que este formulario aquí funcione para
‫que podamos cargar las fotos de
‫los usuarios directamente desde aquí.