1 00:00:01,310 --> 00:00:04,140 ‫-: En este video, aprenderá sobre el procesamiento y 2 00:00:04,140 --> 00:00:06,930 ‫la manipulación de imágenes con Node JS, y 3 00:00:06,930 --> 00:00:08,760 ‫en este caso particular, 4 00:00:08,760 --> 00:00:11,193 ‫cambiaremos el tamaño y convertiremos nuestras imágenes. 5 00:00:12,760 --> 00:00:15,140 ‫Entonces, en todas partes de nuestra 6 00:00:15,140 --> 00:00:18,490 ‫interfaz de usuario asumimos que las imágenes cargadas son cuadrados. 7 00:00:18,490 --> 00:00:20,250 ‫Para que luego 8 00:00:20,250 --> 00:00:22,570 ‫podamos mostrarlos como círculos como este. 9 00:00:22,570 --> 00:00:25,400 ‫Y esto solo funciona cuando son cuadrados, 10 00:00:25,400 --> 00:00:27,260 ‫pero por supuesto, 11 00:00:27,260 --> 00:00:30,535 ‫en el mundo real, los usuarios rara vez 12 00:00:30,535 --> 00:00:32,520 ‫subirán imágenes que sean cuadrados. 13 00:00:32,520 --> 00:00:34,600 ‫Entonces, nuestro trabajo ahora es 14 00:00:34,600 --> 00:00:37,850 ‫cambiar el tamaño de las imágenes para convertirlas en cuadrados. 15 00:00:37,850 --> 00:00:41,300 ‫Muy bien, así es como vamos a hacer eso. 16 00:00:41,300 --> 00:00:45,370 ‫Agregaremos otro middleware antes de la actualización y luego 17 00:00:45,370 --> 00:00:47,570 ‫ese middleware se encargará 18 00:00:47,570 --> 00:00:49,920 ‫del procesamiento real de la imagen. 19 00:00:49,920 --> 00:00:53,200 ‫Muy bien, hagámoslo aquí en el código 20 00:00:53,200 --> 00:00:54,470 ‫inmediatamente después 21 00:00:54,470 --> 00:00:57,333 ‫de este, porque están conectados, ¿no? 22 00:00:58,610 --> 00:01:00,623 ‫Entonces, exporta puntos, 23 00:01:01,690 --> 00:01:05,513 ‫cambia el tamaño de la foto de usuario. 24 00:01:13,250 --> 00:01:15,320 ‫Y antes de continuar, agreguemos este 25 00:01:15,320 --> 00:01:18,160 ‫middleware a la pila de middleware en esta 26 00:01:18,160 --> 00:01:19,523 ‫ruta en particular. 27 00:01:20,870 --> 00:01:22,673 ‫Eso está en las rutas 28 00:01:23,860 --> 00:01:26,710 ‫de los usuarios, y aquí, justo después de 29 00:01:26,710 --> 00:01:27,923 ‫que la 30 00:01:29,410 --> 00:01:32,470 ‫foto se haya cargado en este middleware, la redimensionaremos. 31 00:01:32,470 --> 00:01:35,180 ‫Así que cambie el tamaño, y aquí está 32 00:01:35,180 --> 00:01:36,603 ‫el controlador de usuario. 33 00:01:41,130 --> 00:01:42,710 ‫Bien. 34 00:01:42,710 --> 00:01:44,060 ‫De hecho, 35 00:01:45,620 --> 00:01:47,320 ‫bajemos aquí y regresemos. 36 00:01:47,320 --> 00:01:49,480 ‫Y entonces, en este punto, ya tenemos 37 00:01:49,480 --> 00:01:51,540 ‫el archivo de nuestra solicitud. 38 00:01:51,540 --> 00:01:53,500 ‫Al menos si hubo una carga, 39 00:01:53,500 --> 00:01:55,000 ‫y si no hubo 40 00:01:55,000 --> 00:01:57,280 ‫carga, entonces, por supuesto, no queremos hacer nada. 41 00:01:57,280 --> 00:02:00,163 ‫Eso significa que queremos pasar al siguiente middleware. 42 00:02:01,090 --> 00:02:03,680 ‫Entonces, si no hay ningún 43 00:02:05,230 --> 00:02:10,230 ‫archivo en la solicitud, regrese de inmediato y pase a la siguiente. 44 00:02:10,960 --> 00:02:13,380 ‫Está bien, pero por lo demás, por supuesto, 45 00:02:13,380 --> 00:02:15,700 ‫queremos cambiar el tamaño de la imagen. 46 00:02:15,700 --> 00:02:19,690 ‫Y para eso usaremos el paquete sharp. 47 00:02:19,690 --> 00:02:20,890 ‫Bien. 48 00:02:20,890 --> 00:02:24,453 ‫Bueno, primero que nada, instalémoslo. 49 00:02:25,630 --> 00:02:28,710 ‫Así que MPM instala sharp. Muy 50 00:02:32,190 --> 00:02:35,720 ‫bien, y como está haciendo su trabajo, sigamos 51 00:02:35,720 --> 00:02:38,533 ‫adelante y pongamos eso aquí. 52 00:02:39,500 --> 00:02:40,463 ‫Tan 53 00:02:41,940 --> 00:02:45,600 ‫agudo, y requiere, agudo. 54 00:02:45,600 --> 00:02:47,360 ‫Y sharp es una biblioteca de 55 00:02:47,360 --> 00:02:51,230 ‫procesamiento de imágenes realmente agradable y fácil de usar para Node Js. Y 56 00:02:51,230 --> 00:02:52,590 ‫hay muchas cosas que podemos 57 00:02:52,590 --> 00:02:53,930 ‫hacer con ella. 58 00:02:53,930 --> 00:02:55,970 ‫Pero donde realmente brilla es en el 59 00:02:55,970 --> 00:02:59,150 ‫cambio de tamaño de las imágenes de una forma muy sencilla. 60 00:02:59,150 --> 00:03:03,690 ‫Y eso es exactamente lo que estamos buscando aquí. 61 00:03:03,690 --> 00:03:04,550 ‫Bien. 62 00:03:04,550 --> 00:03:08,590 ‫Entonces, decimos sostenido y luego aquí básicamente 63 00:03:08,590 --> 00:03:11,180 ‫necesitamos pasar el archivo. 64 00:03:11,180 --> 00:03:13,990 ‫Ahora, al realizar un procesamiento de imágenes 65 00:03:13,990 --> 00:03:16,120 ‫como este justo después de 66 00:03:16,120 --> 00:03:19,310 ‫cargar un archivo, siempre es mejor ni siquiera guardar 67 00:03:19,310 --> 00:03:22,770 ‫el archivo en el disco, sino guardarlo en la memoria. 68 00:03:22,770 --> 00:03:24,580 ‫Ya hablamos de eso antes, por 69 00:03:24,580 --> 00:03:27,130 ‫lo que ahora es en realidad hacerlo en la práctica. 70 00:03:27,130 --> 00:03:29,930 ‫Bien, para eso necesitamos cambiar un poco 71 00:03:29,930 --> 00:03:32,830 ‫o la configuración del multer y, en 72 00:03:32,830 --> 00:03:35,230 ‫realidad, solo este almacenamiento del 73 00:03:35,230 --> 00:03:38,703 ‫multer, porque ahora ya no necesitamos nada de esto. 74 00:03:40,600 --> 00:03:42,453 ‫Y en lugar de 75 00:03:45,700 --> 00:03:50,700 ‫un almacenamiento múltiple, será simplemente un almacenamiento de memoria de múltiples puntos. 76 00:03:52,250 --> 00:03:54,810 ‫Y así, ¿de acuerdo? 77 00:03:54,810 --> 00:03:56,720 ‫Y así, como mencioné 78 00:03:56,720 --> 00:04:00,730 ‫anteriormente, de esta manera la imagen se almacenará como un búfer. 79 00:04:00,730 --> 00:04:03,080 ‫Y entonces ese búfer está disponible a 80 00:04:03,080 --> 00:04:07,820 ‫petición del búfer de puntos del archivo de puntos y esto es mucho más 81 00:04:07,820 --> 00:04:10,500 ‫eficiente así, así que en lugar de tener 82 00:04:10,500 --> 00:04:13,600 ‫que escribir el archivo en el disco y luego 83 00:04:13,600 --> 00:04:15,330 ‫leerlo aquí de nuevo. 84 00:04:15,330 --> 00:04:17,860 ‫Simplemente guardamos la imagen básicamente en la 85 00:04:17,860 --> 00:04:20,960 ‫memoria y luego aquí podemos leer eso, ¿de acuerdo? 86 00:04:20,960 --> 00:04:23,181 ‫De todos modos, llamar a la 87 00:04:23,181 --> 00:04:26,300 ‫función sharp como esta aquí creará un objeto en el 88 00:04:26,300 --> 00:04:29,750 ‫que podemos encadenar múltiples métodos para hacer nuestro procesamiento de imágenes. 89 00:04:29,750 --> 00:04:32,913 ‫Entonces, el primero que vamos a hacer es cambiar el tamaño. 90 00:04:34,040 --> 00:04:36,740 ‫Entonces, cambie el tamaño, y luego aquí podemos especificar 91 00:04:36,740 --> 00:04:38,480 ‫el ancho y el alto. 92 00:04:38,480 --> 00:04:42,480 ‫Entonces, digamos 500 y 500, recuerde que queremos imágenes 93 00:04:42,480 --> 00:04:44,780 ‫cuadradas y, por supuesto, la 94 00:04:44,780 --> 00:04:47,220 ‫altura debe ser la misma que 95 00:04:47,220 --> 00:04:48,770 ‫el ancho. 96 00:04:48,770 --> 00:04:50,750 ‫Ahora, esto recortará la 97 00:04:50,750 --> 00:04:55,050 ‫imagen para que cubra este cuadrado completo de 500 veces 500. 98 00:04:55,050 --> 00:04:56,400 ‫Y, de hecho, 99 00:04:56,400 --> 00:04:59,130 ‫podemos cambiar este comportamiento predeterminado si quisiéramos. 100 00:04:59,130 --> 00:05:01,320 ‫Y entonces, nuevamente, echemos un vistazo rápido 101 00:05:01,320 --> 00:05:02,563 ‫a la documentación. 102 00:05:04,860 --> 00:05:09,053 ‫Digamos, github sharp, pero en realidad su propio sitio 103 00:05:09,990 --> 00:05:12,100 ‫web es un poco 104 00:05:12,100 --> 00:05:14,440 ‫mejor, un poco más completo. 105 00:05:14,440 --> 00:05:18,360 ‫Entonces, hagamos clic en ese enlace aquí, y luego aquí podemos 106 00:05:18,360 --> 00:05:20,770 ‫cambiar el tamaño, que es lo que 107 00:05:20,770 --> 00:05:22,780 ‫estamos haciendo actualmente y luego 108 00:05:22,780 --> 00:05:25,153 ‫esto es de lo que estaba hablando. 109 00:05:26,110 --> 00:05:29,130 ‫Muy bien, lo predeterminado aquí es que 110 00:05:29,130 --> 00:05:31,070 ‫la imagen se recortará 111 00:05:31,070 --> 00:05:33,610 ‫para cubrir las dos dimensiones proporcionadas. 112 00:05:33,610 --> 00:05:38,610 ‫Pero también podemos elegir contener, llenar, adentro o afuera. 113 00:05:39,280 --> 00:05:43,310 ‫Y lo haríamos configurando las opciones aquí. 114 00:05:43,310 --> 00:05:46,700 ‫Entonces podemos establecer el ancho, el alto y luego, como 115 00:05:46,700 --> 00:05:48,830 ‫tercera opción, podemos establecer este 116 00:05:48,830 --> 00:05:52,070 ‫objeto de opciones donde luego podemos definir el ajuste. 117 00:05:52,070 --> 00:05:54,560 ‫También podríamos definir la posición, que es 118 00:05:54,560 --> 00:05:56,433 ‫el centro por defecto. 119 00:05:58,970 --> 00:06:00,653 ‫Verá que hay todo tipo 120 00:06:00,653 --> 00:06:03,420 ‫de cosas que realmente podríamos definir para ajustar nuestro 121 00:06:03,420 --> 00:06:04,670 ‫procesamiento de imágenes. 122 00:06:04,670 --> 00:06:07,653 ‫Pero en este caso, lo que tenemos es suficiente. 123 00:06:08,550 --> 00:06:10,720 ‫Pasemos al siguiente paso. 124 00:06:10,720 --> 00:06:12,990 ‫Porque lo que quiero hacer a 125 00:06:12,990 --> 00:06:16,450 ‫continuación es convertir las imágenes siempre a jpeg, ¿de acuerdo? 126 00:06:16,450 --> 00:06:18,863 ‫Y para eso, usamos para formatear, 127 00:06:21,640 --> 00:06:23,463 ‫y luego jpeg. 128 00:06:25,000 --> 00:06:28,180 ‫Luego también podemos definir la calidad de este jpeg. 129 00:06:28,180 --> 00:06:30,170 ‫Básicamente, para comprimirlo un 130 00:06:30,170 --> 00:06:32,310 ‫poco para que no ocupe 131 00:06:33,230 --> 00:06:36,900 ‫tanto espacio y para eso, usamos el método 132 00:06:36,900 --> 00:06:41,900 ‫jpeg, y configuramos una opción en este objeto con calidad y digamos 133 00:06:42,290 --> 00:06:45,043 ‫90 por ciento aquí, ¿de acuerdo? 134 00:06:46,910 --> 00:06:49,860 ‫Entonces, cada método en su propia línea 135 00:06:49,860 --> 00:06:53,210 ‫aquí es mucho mejor, pero en realidad no hemos terminado. 136 00:06:53,210 --> 00:06:56,020 ‫Ya casi terminamos, pero no del todo. 137 00:06:56,020 --> 00:06:57,460 ‫Porque ahora, al 138 00:06:57,460 --> 00:07:01,850 ‫final, finalmente queremos escribirlo en un archivo en nuestro disco. 139 00:07:01,850 --> 00:07:04,913 ‫Y para eso, podemos usar para archivar, ahora 140 00:07:06,230 --> 00:07:08,550 ‫este método aquí realmente 141 00:07:08,550 --> 00:07:10,940 ‫necesita la ruta completa al archivo. 142 00:07:10,940 --> 00:07:13,180 ‫Entonces, básicamente, imágenes 143 00:07:14,240 --> 00:07:17,440 ‫públicas, barra, usuarios y, finalmente, aquí 144 00:07:17,440 --> 00:07:20,460 ‫el nombre del archivo, ¿de acuerdo? 145 00:07:20,460 --> 00:07:21,990 ‫Así que obtengamos eso 146 00:07:21,990 --> 00:07:23,550 ‫de lo que teníamos aquí antes. 147 00:07:23,550 --> 00:07:25,840 ‫Porque, por supuesto, queremos que nuestras imágenes 148 00:07:25,840 --> 00:07:27,183 ‫tengan un formato similar. 149 00:07:29,520 --> 00:07:32,380 ‫Muy bien, copiemos eso. 150 00:07:32,380 --> 00:07:34,723 ‫Pero en realidad no lo pondré aquí. 151 00:07:35,790 --> 00:07:38,010 ‫En su lugar, lo 152 00:07:38,010 --> 00:07:42,443 ‫guardaré para solicitar el nombre del archivo dot. 153 00:07:43,490 --> 00:07:45,777 ‫Ahora, ¿por qué lo hago así? 154 00:07:45,777 --> 00:07:48,280 ‫Bueno, es porque en este momento este nombre 155 00:07:48,280 --> 00:07:50,340 ‫de archivo no está definido. 156 00:07:50,340 --> 00:07:55,340 ‫Entonces, cuando decidimos guardar la imagen en la memoria como un búfer, el 157 00:07:56,270 --> 00:08:00,050 ‫nombre del archivo no se configurará realmente, pero realmente necesitamos 158 00:08:00,050 --> 00:08:02,300 ‫ese nombre de archivo 159 00:08:02,300 --> 00:08:05,050 ‫en nuestra otra función de middleware, ¿verdad? 160 00:08:05,050 --> 00:08:09,310 ‫Así que eso está aquí para actualizarme aquí mismo. 161 00:08:09,310 --> 00:08:12,360 ‫Así que confiamos en la solicitud del nombre del archivo del 162 00:08:12,360 --> 00:08:16,400 ‫archivo de puntos para guardar el nombre del archivo en nuestra base de datos, ¿verdad? 163 00:08:16,400 --> 00:08:19,770 ‫Y entonces, en realidad, deberíamos definir eso. 164 00:08:19,770 --> 00:08:22,442 ‫Y así, anteriormente, por supuesto, estaba 165 00:08:22,442 --> 00:08:25,970 ‫definido por la carga de multer que teníamos, 166 00:08:25,970 --> 00:08:30,323 ‫pero como eso ya no existe, básicamente deberíamos redefinirlo aquí. 167 00:08:31,320 --> 00:08:32,260 ‫¿Okey? 168 00:08:32,260 --> 00:08:34,560 ‫Entonces aquí, de hecho, podemos deshacernos 169 00:08:34,560 --> 00:08:37,020 ‫de esta parte de la extensión, porque 170 00:08:37,020 --> 00:08:39,460 ‫ya sabemos que siempre será un jpeg. 171 00:08:39,460 --> 00:08:42,570 ‫Debido a esto para formatear, ¿de acuerdo? 172 00:08:42,570 --> 00:08:45,513 ‫Y aquí, simplemente podemos poner jpeg. 173 00:08:47,130 --> 00:08:50,383 ‫Por lo que no es necesario obtener la extensión del archivo. 174 00:08:51,320 --> 00:08:52,263 ‫Y ahora 175 00:08:54,610 --> 00:08:55,993 ‫aquí, podemos usar eso. 176 00:08:56,911 --> 00:09:00,890 ‫Req. Archivo de puntos. Nombre de archivo de puntos, y 177 00:09:00,890 --> 00:09:02,403 ‫eso es todo. 178 00:09:04,020 --> 00:09:04,853 ‫¿Okey? 179 00:09:04,853 --> 00:09:06,820 ‫Entonces, todo lo que tenemos 180 00:09:06,820 --> 00:09:10,790 ‫que hacer ahora para terminar es llamar al siguiente middleware de la pila. 181 00:09:10,790 --> 00:09:14,430 ‫Y esa será la función de controlador de actualización. 182 00:09:14,430 --> 00:09:17,603 ‫Así que, por supuesto, ahora probemos eso. 183 00:09:18,530 --> 00:09:21,280 ‫Entonces, ya no necesitamos este. 184 00:09:21,280 --> 00:09:23,390 ‫Vayamos aquí a Postman, y 185 00:09:23,390 --> 00:09:25,240 ‫ahora creo que 186 00:09:25,240 --> 00:09:28,410 ‫el usuario que quiero actualizar se llama arrav. 187 00:09:28,410 --> 00:09:31,053 ‫Echemos un vistazo aquí a nuestros datos muy rápido. 188 00:09:32,520 --> 00:09:35,910 ‫Y sí, entonces esta es la imagen no cuadrada 189 00:09:35,910 --> 00:09:38,070 ‫que vamos a subir ahora y 190 00:09:38,070 --> 00:09:39,800 ‫en realidad ves el tamaño 191 00:09:39,800 --> 00:09:42,600 ‫aquí, que es 1000 veces 1500, así que 192 00:09:42,600 --> 00:09:44,540 ‫luego comparemos eso con nuestra 193 00:09:44,540 --> 00:09:46,223 ‫imagen cargada redimensionada. 194 00:09:47,110 --> 00:09:48,090 ‫Bien. 195 00:09:48,090 --> 00:09:51,090 ‫De todos modos, ahora obtengamos el nombre 196 00:09:52,120 --> 00:09:55,720 ‫de arrav. En realidad, no los necesitamos, siempre son los 197 00:09:56,840 --> 00:10:01,010 ‫mismos, así que arrav es como este, así que inicie sesión. 198 00:10:01,010 --> 00:10:02,930 ‫Para que luego podamos actualizarlo 199 00:10:02,930 --> 00:10:07,530 ‫y verá que en este momento la imagen aquí es el usuario 11. 200 00:10:07,530 --> 00:10:09,620 ‫Y solo para verlo 201 00:10:09,620 --> 00:10:11,400 ‫un poco mejor, actualicémoslo, 202 00:10:11,400 --> 00:10:15,370 ‫inicie sesión en nuestra aplicación web usando ese 203 00:10:15,370 --> 00:10:16,543 ‫usuario. 204 00:10:21,820 --> 00:10:23,883 ‫Así que prueba uno, dos, tres, cuatro. 205 00:10:26,420 --> 00:10:29,490 ‫Muy bien, esa es la imagen actual 206 00:10:29,490 --> 00:10:32,233 ‫y ahora vamos a actualizarla. 207 00:10:37,120 --> 00:10:40,260 ‫Seleccione archivos, y aquí está nuestra 208 00:10:41,330 --> 00:10:44,900 ‫imagen, abra eso y veamos qué sucede. 209 00:10:44,900 --> 00:10:46,290 ‫Y hemos terminado. 210 00:10:46,290 --> 00:10:47,980 ‫En realidad, fue muy 211 00:10:47,980 --> 00:10:50,430 ‫rápido, así que veamos si es correcto. 212 00:10:50,430 --> 00:10:53,023 ‫Bueno, al menos el nombre aquí parece correcto. 213 00:10:54,590 --> 00:10:59,590 ‫Si echamos un vistazo a nuestros usuarios ahora aquí, es 214 00:10:59,750 --> 00:11:02,900 ‫en público o aquí mismo. 215 00:11:02,900 --> 00:11:04,520 ‫Entonces ese debería ser el que en realidad 216 00:11:04,520 --> 00:11:05,420 ‫no lo es. 217 00:11:07,610 --> 00:11:10,070 ‫Y en realidad no se encuentra por ninguna parte. 218 00:11:10,070 --> 00:11:11,710 ‫Recarguemos, ah, y 219 00:11:11,710 --> 00:11:12,913 ‫aquí está. 220 00:11:14,380 --> 00:11:15,493 ‫Ahora, ese es el indicado. 221 00:11:16,580 --> 00:11:20,060 ‫Entonces, ves que ahora es 500 veces 500, es 222 00:11:20,060 --> 00:11:21,700 ‫mucho más pequeño 223 00:11:21,700 --> 00:11:26,560 ‫aquí, por lo que 55 en comparación con los 315 que teníamos antes. 224 00:11:26,560 --> 00:11:28,180 ‫Así que eso 225 00:11:28,180 --> 00:11:31,740 ‫es mucho mejor y, como verá aquí, 226 00:11:31,740 --> 00:11:34,310 ‫ahora también debería actualizarse aquí. 227 00:11:34,310 --> 00:11:36,050 ‫Y eso es perfecto. 228 00:11:36,050 --> 00:11:39,650 ‫Entonces, la cara está en el medio aquí. 229 00:11:39,650 --> 00:11:43,730 ‫Así que el cambio de tamaño fue perfecto. 230 00:11:43,730 --> 00:11:44,563 ‫Frio. 231 00:11:44,563 --> 00:11:46,530 ‫Y espero que también encuentre 232 00:11:46,530 --> 00:11:48,810 ‫algún uso para este tipo de 233 00:11:48,810 --> 00:11:51,290 ‫procesamiento de imágenes en sus propias aplicaciones. 234 00:11:51,290 --> 00:11:54,660 ‫Así que para recapitular rápidamente lo que hicimos aquí. 235 00:11:54,660 --> 00:11:57,340 ‫Bueno, creamos una nueva función de middleware que 236 00:11:57,340 --> 00:11:59,490 ‫se ejecutará justo después de que 237 00:11:59,490 --> 00:12:01,460 ‫se cargue la foto. 238 00:12:01,460 --> 00:12:03,850 ‫Y esa carga ahora está sucediendo 239 00:12:03,850 --> 00:12:07,860 ‫en un búfer y ya no directamente en el sistema de archivos. 240 00:12:07,860 --> 00:12:08,693 ‫¿Derecha? 241 00:12:08,693 --> 00:12:11,163 ‫Y es por eso que usamos este almacenamiento 242 00:12:12,010 --> 00:12:14,950 ‫de memoria aquí, pero, por supuesto, este filtro multer 243 00:12:14,950 --> 00:12:16,420 ‫aquí todavía está funcionando. 244 00:12:16,420 --> 00:12:20,063 ‫Entonces, solo podemos subir imágenes, ¿de acuerdo? 245 00:12:20,980 --> 00:12:23,510 ‫Entonces, aquí en ese middleware, colocamos el nombre de 246 00:12:23,510 --> 00:12:25,600 ‫archivo de esa imagen en el 247 00:12:25,600 --> 00:12:28,000 ‫nombre de archivo de punto de archivo de 248 00:12:28,000 --> 00:12:30,200 ‫solicitud para que podamos usarlo en la actualización. 249 00:12:31,100 --> 00:12:33,510 ‫Muy bien, y aquí tenemos el 250 00:12:33,510 --> 00:12:35,670 ‫procesamiento de la imagen real. 251 00:12:35,670 --> 00:12:38,330 ‫Donde primero lo cambiamos de tamaño a un 252 00:12:38,330 --> 00:12:40,120 ‫cuadrado y luego lo 253 00:12:40,120 --> 00:12:43,010 ‫formateamos a un jpeg con una calidad del 254 00:12:43,010 --> 00:12:45,930 ‫90 por ciento, y finalmente luego escribimos ese archivo 255 00:12:45,930 --> 00:12:50,710 ‫en nuestro sistema de archivos exactamente en la misma carpeta que especificamos también antes. 256 00:12:50,710 --> 00:12:53,260 ‫Muy bien, así es como funciona cuando necesitas 257 00:12:53,260 --> 00:12:55,040 ‫algo de procesamiento de 258 00:12:55,040 --> 00:12:57,310 ‫imágenes, pero si no lo necesitas, entonces, 259 00:12:57,310 --> 00:13:00,500 ‫por supuesto, puedes seguir usándolo de esta manera, ¿de acuerdo? 260 00:13:00,500 --> 00:13:02,210 ‫Y por eso es realmente importante 261 00:13:02,210 --> 00:13:03,450 ‫que hayamos aprendido 262 00:13:03,450 --> 00:13:05,160 ‫a hacerlo de ambas formas aquí. 263 00:13:05,160 --> 00:13:07,380 ‫Muy bien, a continuación, en el 264 00:13:07,380 --> 00:13:10,462 ‫siguiente video, haremos que este formulario aquí funcione para 265 00:13:10,462 --> 00:13:12,700 ‫que podamos cargar las fotos de 266 00:13:12,700 --> 00:13:14,633 ‫los usuarios directamente desde aquí.