JavaScript Fun: Baue eine App mit Fotoeffekten!

1. Te damos la bienvenida a la clase.: Hola, bienvenidos a esta clase. Si eres principiante en desarrollo web y quieres simplemente saltar y construir algunos proyectos divertidos, has llegado al lugar correcto. La idea detrás de esta serie es mostrarte lo que puedes hacer con HTML, CSS, y JavaScript regulares. No estoy confundiendo ningún frameworks, ningún boilerplate, ninguna biblioteca o cualquier plantillas. En cambio, vamos a estar construyendo todo completamente desde cero, paso a paso para mostrarte cómo funcionan todas estas tecnologías gratuitas. Con este proyecto vamos a crear una aplicación de efectos fotográficos. Va a implicar crear un cargador de fotos donde podamos seleccionar la imagen desde nuestro ordenador. Selecciono uno justo aquí, y una vez que abramos esto, entonces este archivo se mostrará dentro del navegador. Esta es la imagen original y luego otra a la derecha tenemos algunas opciones para cambiar el efecto. Podemos cambiar esto para que sea escala de grises. Podemos agregar cosas como un efecto Sepia. Podemos invertir los colores. Las imágenes se componen de píxeles los cuales son valores rojo, verde y azul. También tenemos algunas opciones para cambiar el orden de estos colores también. Esto nos da algún efecto de aspecto agradable, que realmente puede cambiar el aspecto y la sensación de nuestras imágenes. Una vez que terminamos y tenemos una imagen de aspecto bonito la cual quieres usar, también podemos descargar esta imagen también. Este proyecto te dará la oportunidad de aprender muchas cosas nuevas. Crearemos una interfaz de usuario con HTML. Después añadiremos estilo con CSS. Pero el foco principal en este video va a ser el JavaScript, y también trabajar con píxeles. Aprenderás a subir imágenes, crear objetos de lector de archivos, a dibujar al lienzo HTML. Entonces una vez que tengamos esa imagen en el lienzo, aprenderás a leer todos los píxeles de esta imagen. Después recorreremos todos estos píxeles y aplicaremos diversos efectos. También aprenderemos a restablecer la imagen original y también a descargar la versión modificada también. Si esto suena realmente complejo, no te preocupes. Este curso está diseñado para principiantes. No obstante, poco conocimiento de JavaScript sería una ventaja real, e idealmente este debería ser el quinto proyecto que sacas de este JavaScript de serie. Todos los demás proyectos también están disponibles aquí en Skillshare. Realmente beneficiaría tomar estas clases en orden. Espero que ahora estés emocionado de construir estos efectos fotográficos para arriba y te veré dentro de la clase. 2. Comparte tu trabajo en Skillshare!: Al tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar el final de una conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos, y esto te da la oportunidad hacer algo realmente personal y único. No necesitas perderte demasiado y desviarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare, y solo lo revisaré pero también, inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase dirígete la pestaña de proyecto y recursos, donde no solo puedes subir tu proyecto, también puedes ver otros proyectos de clase también. Con esto en mente espero ver lo que creas y subas aquí en Skillshare. 3. Crear la interfaz de usuario: Bienvenido a nuestro próximo proyecto, que es la aplicación de efectos fotográficos. El interfaz de usuario va a ser relativamente sencillo, sobre todo en comparación con algunos de los otros proyectos. Todo lo que vamos a hacer es crear una barra lateral sobre el lado derecho. Esto va a tener una serie de botones los cuales van a crear un efecto en una foto que se está subiendo. Podemos seguir adelante y seleccionar el archivo, elegir una imagen, y luego esto mostrará esto dentro del navegador. Entonces ten una serie de efectos. Podemos hacer de esto un efecto en escala de grises. Podemos despejar estos efectos. Tenemos invert, tenemos el efecto sepia, y luego tenemos una serie de botones, que va a cambiar alrededor de nuestros valores rojo, verde y azul. Esto nos va a dar algunos efectos diferentes como este. Esto nos va a dar una sombra más roja. Un efecto que esto tiene va a ser bastante diferente en cada imagen. Para ello, vamos a intercambiar alrededor de todos los píxeles la imagen para darnos estos efectos de aspecto agradable. También tenemos la facilidad para descargar esta imagen. Podemos hacer click en este botón. Esto luego descargará la imagen para que la usemos. Al igual que con cualquiera de los proyectos de este curso, puedes utilizar una imagen de tu elección. O si quieres usar la misma imagen que he usado para este proyecto, dirígete al repositorio de GitHub, y luego puedes entrar a la aplicación Photo Effects, donde verás no solo el código de muestra una vez que esto sea subido pero también la imagen que estoy usando durante este curso. Para empezar, voy a descargar esto. Haga clic en el nombre de la imagen, haga clic en “Descargar”. Entonces podemos hacer clic derecho, “Guardar” nuestra imagen. Voy a guardar esto en el escritorio. También necesitamos una carpeta de proyecto. Volvamos a nuestro escritorio, New Folder, que van a ser los efectos fotográficos. Arrastre esto hacia nuestro Código de Visual Studio y luego asegurémonos de que nuestra imagen esté disponible dentro de nuestra carpeta de proyecto. Arrastremos esto y soltemos esto en nuestra carpeta del proyecto. paso uno va a ser crear un nuevo archivo, que es para nuestra página de índice. Este va a ser el index.html. Entonces podemos abrir esto en el navegador, copiar el camino a esto, pegar esto en, y estamos bien para ir. Empecemos con nuestra estructura HTML. Como siempre, voy a usar el comando html:5, que está integrado en Visual Studio Code. El título del documento es la App Photo Effects. Entonces dentro del cuerpo, vamos a rodear toda la zona de fotos dentro del elemento principal. Tendremos entonces la sección aparte, que va a ser nuestra barra lateral. Esto es para todos nuestros botones y la carga de imagen. El apartado principal va a ser bastante sencillo. Esta es simplemente la zona que va a mostrar nuestra imagen dentro del navegador. El modo en que vamos a hacer esto es creando un elemento de lienzo. Un lienzo es un elemento HTML que estaremos utilizando para dibujar nuestras imágenes. Se puede utilizar para dibujar casi cualquier tipo de gráficos a partir de líneas y formas, fotos, frutas maduras, objetos complejos, 3D, aunque en este curso sólo accederemos a las características 2D, más específicamente al contexto 2D y nosotros echará un vistazo a esto con más detalle en el JavaScript. Necesitamos crear un elemento de lienzo y luego un ID que va a ser lienzo también. Esto es solo para que podamos seleccionar este elemento en nuestro JavaScript, y luego podemos dibujar nuestras imágenes. A continuación la sección aparte, que va a contener nuestro uploader y nuestros botones. El primer apartado va a ser un div con la clase de input-wrapper. Esta va a ser la sección que va a tener nuestra etiqueta y también el fichero uploader. El rótulo para esta entrada tendrá un ID de uploader y luego el texto de selecto archivo. Después de esto, una entrada, y el tipo de entrada para esto va a ser archivo con el ID de uploader. Entonces podemos usar esto dentro de nuestro JavaScript y esto también coincide con nuestra etiqueta justo arriba. A continuación, después de nuestra envoltura de entrada, podemos crear un segundo div. Este div va a tener la clase de efectos. Esta va a ser la zona donde seleccionamos todos los efectos usando estos botones. El primer botón, esto va a desencadenar el efecto de escala de grises. El segundo botón, esto es para el efecto sepia. El tercero va a ser por invertido. El cuarto, este va a ser el inicio de los cuatro botones, que vamos a cambiar alrededor de nuestros valores rojo, verde y azul. El primero va a convertir el rojo, el verde, y el azul para ser rojo, azul y verde. Vamos a duplicar esto para crear cuatro botones. Siempre vamos a empezar con el color RGB. El lado izquierdo siempre será el mismo. No obstante, para el segundo botón, esto se va a cambiar a azul, verde y rojo. El siguiente va a ser verde, azul luego rojo. La cuarta combinación que vamos a usar es verde, rojo, y luego azul. Si esta combinación de colores que estoy cambiando no tiene sentido en este momento, eso está bien. Todo esto quedará más claro cuando echemos un vistazo a los píxeles en la sección de JavaScript. Después de nuestra sección de efectos, vamos a crear un nuevo div. Este div va a tener la clase de controles y esto va a tener nuestros botones claros y también nuestros de descarga. El primero de claro y el segundo es para que nuestro usuario pueda descargar esta imagen. Dale un ahorro a esto o incluso podríamos abrir esto con nuestro servidor en vivo si has optado por usar esto durante este proyecto. Abramos esto. Vaya a View and the Command Palette, donde podemos echar un vistazo nuestro servidor en vivo y podemos abrir esto con nuestra extensión de servidor en vivo. Ahora dentro del navegador, tenemos una aplicación de aspecto bastante terrible, pero todo el contenido está en su lugar. Vamos a darle estilo en el siguiente video. 4. Cómo aplicar estilo con CSS: Está bien porque este proyecto va a ser bastante sencillo. Simplemente vamos a crear un color de fondo y luego agregar algunos colores a nuestros botones junto con algún diseño responsive. Dado que el estilo es bastante sencillo, voy a empezar esto en la parte superior de nuestra página de índice. Justo dentro de la sección de cabeza, podemos crear la sección de estilo, y si quieres mantener esta separada y coloca en una hoja de estilo separada. El html se va a utilizar para establecer el tamaño de fuente base de 10 píxeles. El apartado de cuerpo, todo lo que vamos a hacer aquí es establecer un color de fondo, y luego vamos a crear nuestro diseño responsive. Vamos a usar el flexbox. Después en las pantallas más pequeñas, estableceremos nuestra barra lateral y nuestra sección principal para que sea el tipo de columna de visualización. Entonces cambiaremos esto en las pantallas más grandes para que sea el tipo de fila. En primer lugar, el color de fondo, que voy a estar usando como valor rgb. El color rojo va a ser 48 y 47 para el valor verde, y el mismo para el azul. El tipo de display va a ser el flexbox y podemos cambiar la dirección del flex para que sea columna. No vemos mucha diferencia en la bombilla de minutos. Vamos a separar estas dos secciones haciendo la sección principal tres veces más ancha que la barra lateral. Hagamos esto un poco más amplio. Puede volver a aprovechar el flexbox y establecer la sección principal para tener un valor flex de tres. Para que esto funcione, también necesitamos ajustar la sección lateral. Esto va a tener un valor flex de uno. Para recargar, no vemos ningún efecto en la página. Esto está ocurriendo porque tenemos la dirección flex establecida en columna. Para que esto funcione más en las pantallas más grandes, necesitamos agregar una consulta de medios para cambiar la dirección del flex para volver a la fila. Añadamos @media. Donde podemos establecer nuestro ancho mínimo para que sea un valor de nuestra elección. Voy a ir por un valor que va a ser de 1,000 píxeles. Lo único que tenemos que hacer aquí dentro es apuntar a nuestra sección de cuerpo, y luego cambiar la dirección del flex para que sea fila o al navegador. Ahora si hacer esto un poco más grande, vemos el valor flex de tres. Para nuestra sección principal, solo la barra lateral tiene un valor flex de uno, lo que significa que es un tercio del tamaño. Reducir esto a 1,000 píxeles o por debajo devolverá nuestras direcciones flex para volver a la columna para nuestra pantalla más pequeña. Para la barra lateral en la vista más grande, también vamos a agregar solo un pequeño margen en el lado izquierdo para darnos algo de espacio a partir de nuestra imagen. El apartado de lados, podemos establecer el margen a la izquierda de 0.5rems. Entonces vamos a llegar a trabajar con estos botones. Los botones son para todos nuestros efectos y también los botones claros y los de descarga. El fondo va a ser un valor rgb de 21, 20 y 20. Hagamos que estos sean un poco más grandes con un poco de Relleno. Por lo que 1.6rems en la parte superior, cero en la derecha mantendrá esto consistente con la parte superior y a 1.6rems en la parte inferior y luego sumar 2rems en el lado izquierdo, lo que nos va a dar algo de espaciado desde la izquierda de abajo. El tamaño de fuente de 1.6rems, que es de 16 píxeles. El cursor se va a configurar para que sea un puntero, cuando el usuario pasa por encima de cualquiera de estos botones. El color para que podamos ver el texto. Esto va a ser un valor rgb. El rojo es 212, 210 para el verde, y el valor azul de 210. Dado nuestro texto unos colores más claros, por lo que destaca más. También podemos eliminar este borde predeterminado estableciendo esto en un valor de none. Entonces podemos usar nuestro propio borde en la parte inferior para darnos una línea blanca entre cada uno de estos botones. Esta línea blanca va a tener un píxel de ancho y un color sólido. A continuación vamos a añadir un efecto flotante a nuestros botones. Esto lo hacemos con el estado flotante. Todo lo que tenemos que hacer aquí es darle un ligero cambio a su color de fondo. El valor que voy a buscar es un valor rgb de 50, 47 y 47. Vamos a darle una oportunidad a esto. Eso está todo bien. Ahora vamos a poner todos estos botones en sus propias líneas. Esto es relativamente sencillo todo lo que necesitamos hacer es apuntar a nuestra clase de efectos, que es el envoltorio div para todos estos botones abajo en nuestro HTML. Apuntemos nuestros efectos. Tenemos que configurar el tipo de pantalla para que sea flex. Después para hacer estos verticales, podemos establecer la dirección del flex para que sea columna. Abajo a nuestros controles, que es el botón Borrar y el botón Descargar. Vamos a asegurarnos de que cada uno de estos botones ocupe la mitad del ancho del espacio disponible. Nuevamente, vamos a hacer uso del tipo display de flex, y luego podremos apuntar a cada uno de nuestros botones, los cuales están anidados dentro de esta sección de control. Si configuramos el flex para que sea un valor de uno, esto va a asegurarse de que cada uno de nuestros botones dentro de la sección vaya a tomar cantidades iguales de espacio abiertas. Todavía tenemos un tablero en la parte inferior por lo que podemos quitar esto con border-bottom ninguno. Si nos desplazamos hacia arriba, lo siguiente que vamos a hacer es mover todos los textos, estos botones para estar sobre la izquierda. Podemos hacer esto configurando el alineamiento de texto para que quede a la izquierda. Entonces para nuestros dos botones en la parte inferior, podemos reinstaurar esto configurando esto para que sea un text-align y para que sea central. También podemos eliminar los valores de relleno para este botón Borrar y Descargar. El relleno. Vayamos por 1.6rems en la parte superior e inferior y cero en la izquierda y la derecha, que luego jalarán nuestro texto hacia el centro de nuestros botones. Volver arriba tenemos esta sección la cual tiene una etiqueta y también una entrada. Empecemos con nuestra etiqueta. Establece el tamaño de la fuente para que sea un poco más grande. Por lo que 1.8rems. Si también estiramos el navegador para ser de un tamaño más amplio. Cuando estos dos elementos están uno al lado del otro. También necesitamos algo de relleno a la derecha de esta etiqueta. Yo quiero agregar 1.6rems. Tanto esta etiqueta como también la entrada estaba rodeada en un div llamado envoltorio de entrada. Ahora vamos a usar esto y añadir algo de relleno y también un color de fondo. Esta era la clase, así que usamos el punto. El fondo quiere darle a esto un simple color de gris y también un valor de relleno de 1.6rems. Después para terminar esta sección CSS desactivada, vamos a seleccionar nuestra sección de lienzo, que está sobre el lado izquierdo en la sección principal, luego establecer esta para que sea el 100 por ciento del espacio disponible. Eso es todo lo que vamos a hacer. Podemos seguir adelante y hacer algunos cambios más. De lo que alguien mantiene el estilo de este proyecto razonablemente simple, y luego en el siguiente video, pasaré a dibujar al lienzo. 5. Cómo dibujar en el lienzo: Para que este proyecto cobre vida ahora, necesitamos agregar un guión y también descubrir cómo podemos dibujar al lienzo. En la parte inferior de nuestro índice o html, justo encima de la cláusula y el cuerpo, agreguemos nuestro script con la fuente de script.js. Pasado a la barra lateral, ahora podemos crear este script.js. Ahora tenemos un lienzo elementos dentro de nuestro html, y esto también tiene el ID de lienzo. Pero, ¿cómo vamos realmente a dibujar a este lienzo? Bueno, lo primero que queremos hacer es crear una constante llamada lienzo. Dentro de aquí, vamos a seleccionar este lienzo por el ID, por lo que getElementById y el ID fue lienzo. Esto ahora nos está dando nuestra referencia a nuestro elemento html. Entonces necesitamos acceder a lo que se llama el contexto de renderizado. Esto nos permitirá acceder a una gama de funciones de dibujo, para que podamos manipular lo que hay en el lienzo. El modo en que podemos hacerlo es accediendo a nuestros elementos de lienzo, que restauramos arriba. Podemos acceder al contexto mediante el uso de un método llamado getContext. Sólo vamos a estar accediendo a las características 2D, por lo que pasamos en 2D. Entonces vamos a almacenar esto en una constante llamada ctx. Se utilizan las referencias ctx cada vez que queremos dibujar al lienzo. Por ejemplo, este contexto tiene un método FillText para dibujar un texto sobre nuestro lienzo. Accedamos a nuestro contexto, y luego podremos hacer uso de una de estas funciones de dibujo que mencionamos, que se va a llamar FillText. Dentro aquí como una cuerda, vamos a pasar algún texto que queremos mostrar en el lienzo. Agrega cualquier cosa dentro aquí. Podemos entonces agregar dos valores más, que es el ancho y también la altura. Vamos por 100 pixeles y 50 pixeles. Entonces veamos esto más en el navegador. Derriba esto. El color del texto más oscuro no destaca demasiado, pero este es ahora nuestro texto sobre el lienzo. También podemos crear formas como un rectángulo, y también podemos usar el trazo, que es el contorno del rectángulo o la forma, o podemos usar un relleno que va a crear una forma rellena. Echemos un vistazo a cómo podemos crear un rectángulo en el lienzo. Nosotros, nuevamente, accedemos al contexto. Podemos entonces llenar un rectángulo con FillRect. Entonces vamos a pasar en todos los valores diferentes. Las dos primeras, fáciles coordenadas x e y del lienzo donde quisiéramos iniciar este rectángulo. Si ingresamos un valor x es cero y el valor y es cero, esto reemplaza nuestro rectángulo en la esquina superior izquierda del lienzo. Un tercer y cuarto valores van a ser del tamaño del rectángulo. Si quieres que esto sea de 50 por 100, esto ahora tiene 50 píxeles de ancho y 100 de alto. Si no quisiéramos este color sólido y solo queríamos un contorno, podríamos cambiar esto por el StrokeReect. Este trazo y este relleno también pueden aplicarse cuando creamos diferentes formas también. En lugar de especificar un tamaño fijo así, también podemos acceder a nuestro objeto de lienzo y pasar esto como variable. Podemos establecer el ancho del lienzo y también el lienzo, la altura. Esto ahora nos va a dar un rectángulo que es la altura y el ancho del lienzo. También podemos usar objetos de diferentes colores también. El modo en que podemos cambiar el color es accediendo al contexto y luego usando el FillStyle. Quiero establecer este siguiente rectángulos sea igual al valor x de 42e9f5. Ahora movamos esto arriba por encima de nuestro rectángulo. Podemos cambiar esto para que sea un Rectangle rellenado y también hacer que esto sea un poco más pequeño. Cambiemos esto para que sea 50 por 50 para darnos un cuadrado. Otro ejemplo de lo que podemos hacer con el lienzo es dibujar algunas líneas para crear algunas formas más complejas. Por ejemplo, si quisiéramos crear algo así como un triángulo, entonces podemos crear una serie de líneas para crear la forma. Vamos a comenzar nuestra forma con CTX.BeginPath. BeginPath iniciará o restablecerá cualquier ruta existente que creamos anteriormente. Después de esto, vamos a declarar exactamente de qué manera en el lienzo, queremos comenzar nuestra unión. Por ejemplo, si quisiéramos empezar esto en el mismo centro del lienzo, haremos CTX.Moveto. MoveTo va a mover nuestros puntos de referencia a cualquier lugar del lienzo sin dibujar realmente ninguna línea. El modo en que podemos colocar esto en el centro es estableciendo el lieno.width, luego dividirlo por 2 para colocar esto en el centro. Entonces podemos hacer lo mismo para el lieno.height dividiendo esto por 2. Ahora mismo, deberíamos estar en una posición donde estemos listos para dibujar algunas líneas rectas desde el centro de nuestro lienzo. Accedemos a nuestro contexto y luego a LineTo. Si quisieras dibujar una línea hacia la esquina superior derecha, las coordenadas que necesitamos en este momento son 300 y cero. Por lo que 300 para el valor x y cero para el valor y. ¿ Por qué necesitamos estos dos valores exactos? Bueno, esto se debe a que por defecto, el lienzo tiene 300 píxeles de ancho por 150 píxeles de alto. Si esta posición en la parte superior izquierda es cero, cero, el primer valor de 300, colocaremos esto justo al final. Después usamos el valor cero para quedarnos en la parte superior del lienzo. Si agregamos algún otro valor dentro de aquí, esto luego empujará esto más hacia abajo. En realidad hemos creado nuestra primera línea con la serie en el lienzo. También necesitamos usar ctx.stroke. Entonces todo lo que necesitamos hacer desde aquí es crear una serie de líneas. El siguiente, si queremos hacer esto desde arriba a la derecha hasta abajo a la derecha, empezamos por mantener el valor x como 300, que es justo al final. Como describimos la altura del lienzo por defecto va a ser de 150, pero esto nos deja una línea desde arriba derecha hasta abajo derecha. Si quisiéramos mandar esto de nuevo al centro, entonces tenemos dos opciones. Podríamos seguir adelante y crear una nueva línea al igual que hicimos con estas dos líneas de código, o en su lugar, podemos volver al principio, que es el centro del lienzo mediante el uso de CTX.ClosePath. Ahora tendré un triángulo. Si quisiéramos llenar esto con un color sólido, podríamos reemplazar el trazo por relleno. Esta es ahora una introducción básica para unirse en el lienzo. Todo esto es genial, pero no necesitamos nada de esto para nuestro proyecto. En cambio, necesitamos dibujar una imagen sobre este lienzo. En cambio, vamos a eliminar esta sección, y podemos crear un nuevo elemento de imagen. Podemos crear una nueva imagen elementos con nueva imagen. Este nuevo constructor de imagen va a crear un nuevo elemento de imagen igual que hicimos cuando usamos Documents.CreateElements. Tira esto en una constante llamada img. A continuación, necesitamos establecer una fuente de imagen. Tenemos que agarrar nuestra imagen y establecer el atributo fuente para que sea igual a nuestra imagen, que es bridge.jpg. Recuerda cambiar esta fuente de imagen si has usado una imagen diferente. Ahora tenemos nuevos elementos de imagen y hemos establecido la fuente. Ahora necesitamos posicionar esto en el lienzo. Pero justo antes de hacer esto, necesitamos realmente asegurarnos de que esta imagen haya sido creada antes de intentar dibujar esto en el lienzo. El modo en que podemos hacerlo con esto es mediante el uso de onload, que va a ejecutar una función una vez que nuestra imagen haya sido creada. Dentro de esta función, vamos a dibujar nuestra nueva imagen al lienzo. Como siempre, seleccionamos nuestro contexto, y luego tenemos acceso a DrawImage. El primero que necesitamos añadir es la imagen, que se desea dibujar, y esta es nuestra variable de imagen. Después establecemos la posición en el lienzo donde queremos que se muestre esta imagen. Si establecemos que esto sea cero y cero, esto se mostrará desde la esquina superior izquierda. Ahora vemos una imagen en la pantalla, pero la imagen es demasiado grande para el lienzo. Otra cosa que podemos hacer es agregar dos valores más, y esto es establecer el ancho y la altura de la imagen. Si establecemos esto en 300 con la altura y en 150 para el ancho, esto ahora asegurará que nuestra imagen sea ahora del mismo tamaño que el lienzo. A pesar de que ahora vemos esta imagen en la pantalla, no se ve demasiado de alta calidad. Ahora bien, esto se debe a que ahora la imagen se ha estirado para tener el mismo tamaño que un lienzo. No obstante, podemos cambiarlo y asegurarnos de que el lienzo se expanda para tener el mismo tamaño que la imagen. Hagamos esto justo arriba donde dibujamos nuestra imagen. Podemos establecer el ancho de nuestro lienzo con lieno.width para que sea igual al ancho de nuestra imagen. Justo debajo, exactamente lo mismo para nuestra altura, establecemos la altura del lienzo para que sea igual a nuestra altura de imagen. Podemos mover los dos últimos valores donde establecemos nuestro tamaño de imagen dentro del drawImage. Esto ahora nos dará una imagen clara ya que ahora el lienzo se estira para tener el mismo tamaño que la imagen. Este es un resumen básico de algunas de las cosas que podemos tratar con el lienzo. Pero sólo vamos a estar usando esto para agregar imágenes y manipular los píxeles. A continuación, queremos hacer uso de nuestro cargador de archivos, que agregamos en la parte superior de esta barra lateral. Esto va a permitir que el usuario seleccione una imagen de su computadora en lugar de usar este valor codificado duro justo aquí. 6. Cómo cargar imágenes: Visualizar una imagen en la pantalla o en el lienzo es ahora un gran paso hacia el trabajo de nuestra aplicación. Pero lo siguiente que queremos hacer es permitir que el usuario haga clic en el cargador de archivos, seleccione una imagen de su elección, y luego mostrar esto al lienzo. Por el momento, solo estamos codificando duro una fuente de imagen con la imagen que está dentro de nuestra carpeta de proyecto. Eso es lo que vamos a hacer ahora en este video. Vamos a empezar por crear un nuevo objeto FileReader, y luego podemos almacenar esto dentro de una constante llamada lector. Este FileReader nos va a permitir leer contenidos de archivos, o en nuestro caso, la imagen que se almacena en el ordenador del usuario. Esto nos va a permitir utilizar el fichero uploader, y esta es la entrada que agregamos en el HTML. Después podemos seleccionar una imagen y luego configurarla como nuestra fuente de imagen. El primer paso para que esto suceda es ir con nuestro índice y dentro aquí si echamos un vistazo a nuestro uploader, esto tiene la ID de uploader. Vamos a usar getElementById para seleccionar esta entrada, y luego activar una función cuando esto se cambie. De vuelta a nuestros scripts en la parte inferior, podemos crear una referencia a esta entrada llamada ImageLoader, agarrar el ID con getElementById, y el ID fue uploader. Podemos entonces seleccionar nuestra constante de ImageLoader y agregar un EventListener. El evento que queremos escuchar es el evento de cambio, y esto ocurrirá cuando se haya subido un nuevo archivo. Cuando esto suceda, vamos a crear una función llamada UploadImage. Entonces vamos a crear esta función justo arriba, que fue UploadImage. Esta UploadImage también va a superar la información del evento ya que estamos usando una entrada. Para empezar en esta función, vamos a hacer un registro de consola y simplemente generar el valor de nuestro lector de archivos. Vamos a enviar nuestro lector, todo al navegador, haga clic derecho e inspeccione, y podemos ver qué datos se pasan en la consola. Elija nuestro archivo, seleccione cualquier imagen, y luego aquí podemos ver la salida de nuestro lector de archivos. Actualmente, todos nuestros valores incluyendo el resultado, se establece en un valor de nulo. Esto se debe a que aunque tenemos una configuración de objetos de lector de archivos, aún no lo hemos pasado nuestros datos de imagen. El dato del archivo proviene de nuestro cargador de imágenes, cual se almacena dentro de esta variable e. Ahora vamos a echar un vistazo al valor de e, recargar el navegador, y podemos seleccionar una nueva imagen, abrir esto, esta es toda la información que se pasa a esta función sobre nuestro evento de cambio. Si entonces abrimos el objetivo, que es nuestra entrada, pincha en la flecha, y luego desplázate hacia abajo, tenemos este valor llamado archivos. Esta es una lista de todos los archivos que se ha subido desde nuestro cargador de archivos. Por supuesto, sólo hemos permitido subir un solo archivo. Entonces esto sólo va a tener el valor de cero. Este es nuestro nombre, que es bridge.jpg. Ahora podemos pasar estos datos de imagen a nuestro lector de archivos. Recuerda que accedemos al evento, luego accedemos a los objetivos, luego accedemos a los archivos, y al primer archivo de cero. De vuelta a nuestra función, ahora podemos apuntar a nuestro lector, y luego podemos establecer esta URL de archivo con ReadasDataUrl. Dentro de su método, pasamos entonces en la ubicación de nuestro archivo, que era e.targets.files, y el primer archivo que es el índice de cero. Ahora hagamos un nuevo registro de consola con el valor del lector y veamos qué sucede esta vez. Recuerda, la última vez que hicimos esto, obtuvimos el valor de null. Entonces abre la consola, selecciona el nuevo archivo. Tenemos nuestro objeto FileReader, y ahora dentro de este resultado en la parte inferior, ahora tenemos algunos datos de archivo en lugar del valor de null. Este FileReader ahora tiene todos los datos que necesitamos. Ahora, todo lo que necesitamos hacer es acceder a nuestro lector, y luego al igual que hicimos arriba con nuestra imagen, también vamos a activar una función una vez que esto haya terminado de cargarse. Esto ahora nos deja en la misma posición que teníamos justo arriba, donde tenemos nuestra fuente de imagen, y luego necesitamos cargar esto en el lienzo. Para ello, podemos mover la sección justo aquí, pegar esto dentro de nuestra función onload, y ahora en lugar de su valor codificado de bridge.jpg, ahora vamos a establecer la fuente de imagen para que sea igual al lector y también acceder al valor de resultado que acabamos de ver en la consola. Ahora todo lo que queda por hacer es guardar esto y probar esto de nuevo en el navegador. Por lo que elegimos un archivo, agarramos cualquier imagen, y este archivo ahora se muestra dentro del lienzo. Ojalá, ahora todo esto está funcionando para ti también. Está pasando un poco aquí, así que hagamos una recapitulación rápida. Si volvemos a nuestro guión. En primer lugar, agarramos nuestra entrada de archivo y almacenamos esto dentro de una constante llamada ImageLoader. Agrega todo este camino y escucha los cambios que ocurrieron una vez que se ha subido un nuevo archivo. Esto entonces va a activar nuestra función UploadImage, que establecemos justo aquí. Creamos una variable de lector que es igual a un nuevo objeto FileReader. Este lector de archivos nos permite leer el contenido de cualquier archivo subido, que son imágenes en nuestro caso. Una vez ejecutada esta función UploadImage, entonces obtendrá pasar la información del evento, cual contiene la imagen que el usuario ha subido. Esta información del archivo se pasa entonces a nuestro FileReader, y lo hacemos con un método llamado ReadasDataUrl. Por último, cuando todo esto haya terminado y cargado completamente, entonces vamos a establecer la fuente de la imagen y luego mostrarla en el lienzo con nuestras imágenes. Ahora subiendo. A continuación, vamos a aprender sobre cómo acceder a todos los píxeles que componen estas imágenes. Una vez que entendemos entonces cómo todos los píxeles componen una imagen, entonces podemos jugar con ellos para crear nuestros efectos. 7. Qué son los datos de píxeles: Para entender cómo manipular nuestras imágenes y también cómo agregar efectos, primero necesitamos entender cómo los píxeles componen nuestras imágenes. Para obtener los datos de píxel de nuestro lienzo, tenemos disponible un método llamado GetImageData. Echemos un vistazo a cómo podemos usar esto dentro de nuestro guión. Instalar esto dentro de una constante llamada ImageData. Voy a establecer esto igual a ctx, y luego llamar al método que acabamos de mencionar, que era GetImageData. GetImageData nos va a permitir agarrar todos los píxeles que almacenaste en el lienzo. Porque queremos agarrar todos los valores de píxel del tamaño completo del lienzo, los dos primeros valores que vamos a agregar es la posición inicial de la parte superior izquierda, que es 0, 0. los dos siguientes valores, queremos agarrar el ancho completo del lienzo, y también la altura completa. Podemos hacer esto con lieno.ancho y también seleccionando el lieno.altura. Esto va a agarrar todos los datos de imagen desde la parte superior izquierda derecha a través de la página hasta la parte inferior derecha. También como nota al margen, podemos seleccionar una parte más pequeña del lienzo si solo queríamos los datos de la imagen para una parte en particular. Queremos el tamaño completo del lienzo sin embargo, ya que la imagen va a ser del tamaño completo del lienzo. Hagamos un registro de consola y veamos qué sucede en el navegador. Inicie sesión en nuestro ImageData, haga clic derecho e inspeccione. Mira en la pestaña de la consola. Ahora tenemos estos datos de imagen. Recuerda desde el principio mencionamos que el ancho y alto por defecto del lienzo es de 150 por 300. También tenemos estos datos y si hacemos click en la flecha desplegable, vemos que tenemos unos 180,000 valores diferentes. Todos nuestros datos se almacenan en una estructura como matriz. Contar con 180 mil valores, que conforman todos nuestros datos de lienzo. Si hacemos clic en el desplegable para expandir cualquiera de estas secciones, vemos que todos los valores se establecen en cero. Esto se debe a que actualmente no tenemos nada almacenado en el lienzo. Ahora bien, si queremos ver esto con más detalle con una imagen, podemos agarrar estas dos líneas de código y colocarlo dentro de nuestra propia función de carga. Esto significa que esta sección sólo se ejecutará una vez que se haya subido una imagen. Elige el archivo, selecciona la imagen. Nuestros datos de imagen se devuelven ahora una vez más. Esta vez aunque vemos una altura diferente y un ancho diferente ya que configuramos el tamaño general del lienzo para que sea igual a nuestra imagen. También vemos ahora tenemos un lienzo más grande. Ahora tenemos 4.3 millones de piezas de datos. Esta siguiente parte es realmente importante de entender. En primer lugar, si agarramos nuestra altura y nuestra anchura, podemos multiplicar estos dos valores juntos, lo que 853, y luego multiplicar esto por 1280, lo que nos da un valor de 1.09 millones. Este tal vez sería el número de píxeles o el número de piezas de datos que esperarías que se devuelvan si multiplicas el ancho y la altura. No obstante, tenemos un valor que es cuatro veces mayor. Si multiplicamos 1091840 por el valor de cuatro, entonces vemos 4.3 millones, igual que en nuestros datos. Esto ahora lleva a la pregunta de por qué obtenemos exactamente cuatro veces los valores de vuelta cualquier número de píxeles? Bueno, esto se debe a que cada píxel en nuestro lienzo está conformado por cuatro canales. Tenemos un rojo, verde, y azul, y también un valor alfa. Los valores rojo, verde y azul conforman el color de cada píxel. Por lo que el primer píxel en la parte superior izquierda sería nuestra primera pieza de datos. Si entramos aquí nuestro primer píxel en la parte superior izquierda son estos primeros cuatro valores justo aquí. Este píxel en particular se compone con un valor rojo de 49, valor verde de 39, y un valor azul de 92. El cuarto valor de 255 es el valor alfa, y éste es la opacidad. Si esto fuera un valor de cero, esto será totalmente transparente. Pero 255 es el valor más alto, lo que significa que no hay transparencia establecida en este píxel en particular. Lo mismo, si vamos al siguiente lote de cuatro píxeles, ven los valores rojo, verde y azul y también el valor alfa final. Nuestro primer píxel y nuestro segundo píxel es de los mismos colores. Si vamos al tercer lote, así 8, 9, 10, 11, vemos que debido a que esto se está mezclando a un color diferente, el valor rojo ha subido de 49 a 50, el valor verde ha pasado de 39 a 40, y también el valor azul también ha aumentado. Tan solo para recapitular, tenemos los datos de la imagen que se ha devuelto del lienzo. Tenemos la altura y el ancho del lienzo y si multiplicamos estos dos valores, esto nos da el número total de píxeles en el lienzo. Cada píxel individual tiene los cuatro valores de rojo, verde, azul y alfa. Es por ello que las piezas de datos que nos devuelven son exactamente cuatro veces la cantidad de píxeles. Ahora con este conocimiento de cómo se componen los píxeles utilizando los cuatro canales, ahora vamos a utilizar lo que hemos aprendido en el siguiente video, al recorrer estos píxeles y cambiarlos para que sean valores diferentes. 8. Bucle a través de los datos de la imagen: Ahora sabemos que todo lo que está en el lienzo o todos nuestros píxeles, ahora se almacena en esta constante llamada ImageData. Ahora podemos usar esto para recorrer todos nuestros datos, que se almacenan en su interior, y luego podemos jugar con los valores de píxel. Para ello, vamos a crear una función, donde podamos agarrar estos datos de píxel y tener un poco de juego con cada uno de los valores. Entonces funciono, y yo como llamar a este cambio. También podemos eliminar nuestro registro de consola desde arriba. Podemos agarrar esta línea de código justo aquí. Saca esto y pega esto dentro de nuestra función de cambio. Todos nuestros datos de píxel dentro de esta variable se almacenan en esta propiedad de datos. Por lo que podemos acceder a esto y crear nueva constante llamada datos, y establecer esto igual a imageData.data, y esto nos dará acceso a todos los valores de píxel dentro de esta propiedad de datos. Por lo que sabemos que hay cientos, miles, o incluso millones de piezas de datos dentro de esta propiedad. Entonces lo mejor que podemos hacer es recorrer cada una de estas en lotes de cuatro. Si pasamos por esto en lotes de cuatro, sabemos que el primer valor en cada bucle siempre va a ser el valor rojo. El segundo valor siempre va a ser el verde, y el tercer valor siempre va a ser el valor azul. Entonces para hacer esto dentro de nuestra función de cambio vamos a crear un for-loop. Una vez que se ejecute el bucle, crearemos una nueva variable llamada i, e inicialmente estableceremos esto en 0. Queremos que este for-loop siga funcionando siempre y cuando haya valores almacenados dentro de nuestros datos. Entonces vamos a seguir así siempre y cuando yo sea menor que data.length. Por lo que los datos son todos nuestros datos de imagen y la longitud es el número de elementos, por lo que nuestro bucle seguirá funcionando siempre y cuando haya datos de píxeles por recorrer. El tercer enunciado que vamos a decir i plus equivale a 4. Entonces en el primer bucle, estableceremos la variable de i para que sea igual a 0, y luego para cada bucle después incrementaremos este valor en cuatro. Hacemos esto porque como ya sabemos, cada píxel tiene cuatro valores. Por lo que aumentar esto en cuatro en cada bucle será el comienzo de cada conjunto de datos de píxel. En el primer bucle agarraremos los primeros cuatro valores de píxel. Estos serán estos justo aquí. Podemos acceder a estos con datos, y al igual que una matriz, podemos acceder a la primera, que es el valor rojo, hicimos datos i. Recuerda al principio, i es igual a 0, por lo que esto será exactamente lo mismo que los datos 0. Si duplicamos esto dos veces más, podemos obtener el segundo valor con el número de índice de uno. Este es el valor de verde, y el valor azul con el número de dos. Si quisiéramos, también podríamos agarrar el Alpha o el valor de transparencia, pero no necesitamos esto para este ejemplo. Este es el primer lote o los cuatro primeros valores. Una vez que se haya corrido este bucle, el valor de i se incrementará en cuatro, y luego esto pasará al siguiente conjunto de cuatro valores, dejando que i sea igual a 4, 5, 6 y 7. Por lo tanto, en lugar de tener estos valores codificados, podemos establecer que esto sea igual a i, que es el primero de cada conjunto de cuatro, e i más 1, y luego i más 2. Esta primera línea aquí siempre va a ser igual a un valor rojo. Esto siempre va a ser igual a nuestros valores verdes, y esto siempre va a ser igual a nuestros valores azules. Entonces si queremos jugar con estos colores, un valor RGB va de cero a 255. Entonces, por ejemplo, podríamos establecer el valor rojo para que sea igual a 255. Para ver estos cambios, ahora necesitamos volver a aplicar estos píxeles en el lienzo. Para ello, podemos utilizar un método llamado PutiImageData. Entonces justo después de nuestro for-loop, podemos volver a acceder a nuestro contexto, y luego al método llamado PutiImageData. El dato que queremos volver a poner en el lienzo es este imageData. Voy a aplicar esto en la parte superior izquierda al lienzo con la posición de 0, 0. Entonces, finalmente, llamemos a esta función de cambio, necesitamos agregar un manejador de clics a nuestro primer botón. Dentro de nuestro índice, comenzaremos con el botón de escala de grises, que es el primer botón de esta sección de efectos. Agarremos estos documentos de Word y en esta ocasión usaremos QuerySelectorAll. Esto va a agarrar todos los elementos de nuestra página, que tiene el tipo de botón. Debido a que tenemos múltiples botones, entonces necesitamos seleccionar nuestro primer botón con la posición de índice de cero. Usando AdDevENTListener, podemos entonces escuchar cualquier evento de click, que luego van a ejecutar nuestra función de cambio. Probemos esto de nuevo en el navegador. Vamos a reiniciar nuestro servidor en vivo, elegir nueva imagen. Entonces si hacemos clic en nuestro primer botón, que es la escala de grises, entonces establecemos todos los valores rojos dentro de nuestros datos de imagen para que sean un fuerte valor rojo de 255. Ahora actualicemos nuestro for-loop, y restableceremos nuestros colores rojos para que sean exactamente como están en la imagen. Baja a nuestra sección verde, donde en su lugar estableceremos el verde para que sea 255. Sube esta imagen, da click en nuestra función y ahora vemos que el color verde surte efecto. También podríamos hacer lo mismo al tercero o al valor azul también. Esto es todo lo que necesitamos hacer para aplicar efectos a nuestras imágenes. Ahora es sólo el caso de ajustar los valores de color de nuestros píxeles dependiendo de qué efectos queremos aplicar, y esto es lo que vamos a empezar a hacer a continuación cuando aplicemos un efecto de escala de grises. 9. Funciones de escala de grises, sepia e inversión: Con el conocimiento que ahora tenemos más justo en esos valores de píxel, ahora podemos agregar algunos efectos y vincularlos a nuestros botones. Lo primero que vamos a hacer es comenzar con nuestro botón en escala de grises. Por lo que podemos cambiar esta función de ejemplo a escala de grises. Con esto, también necesitamos modificar nuestro oyente de clics, a partir del cambio, este también tiene que ser nuestro nombre de función de escala de grises. Para este efecto en escala de grises, necesitamos crear un color de gris y luego añadirlo a cada uno de nuestros valores rojo, verde y azul. Dentro de nuestro bucle, vamos a crear una constante para nuestro valor gris. Entonces necesitamos crear nuestro valor gris. Vamos a hacer esto, en primer lugar, seleccionando nuestro color rojo, que es los datos i Vamos a agregar esto a nuestro verde, que es los datos i más 1. Entonces agregamos estos a nuestro azul, que es los datos i plus 2. Todo lo que estamos haciendo aquí es simplemente agregar juntos los tres de nuestros colores por cada píxel en la pantalla. Para reducir esto para que sea un tono de gris, también necesitamos manipular estos tres valores. Entonces el valor rojo, necesitamos multiplicar esto por 0.21, el color verde que está en el medio, multiplicar esto por 0.71 y el azul se multiplica por 0.07. Ahora no hay regla dura y rápida que necesitamos usar para este color gris. Esta es simplemente una fórmula que se encuentra al investigar el tema. Podemos usar cualquier valor diferente dentro de aquí. Ahora podemos agarrar nuestro valor gris y establecer esto como nuestro rojo, también como nuestro verde, y también como nuestros valores azules. Vamos a probar esto en el navegador. Podemos refrescar, elegir una nueva imagen. Probemos nuestros efectos en escala de grises. Bien, nuestra escala de grises ahora está funcionando y la próxima semana pasaremos al efecto sepia, que es básicamente una versión más cálida de una imagen en escala de grises. Toda esta funcionalidad va a ser similar, por lo que podemos copiar nuestra función en escala de grises, y agregar esto justo debajo. A éste se le llama sepia. Seguimos agarrando todos los datos de la imagen, pero esta vez necesitamos manipular esto de una manera ligeramente diferente. Entonces vamos a usar el color gris base de la función de escala de grises, pero en su lugar vamos a agregar algunos valores extra de rojo y verde. Entonces para el valor rojo, que es primero, podemos agregar 95, un valor verde, vamos a sumar 58, y esto le dará a nuestra imagen un tono ligeramente más cálido. Podemos entonces llamar a esta función por nuestro segundo botón. Vamos a copiar esto, QuerySelectorAll y luego podemos seleccionar nuestro segundo botón con el número de índice de 1, la función es sepia. Vamos a probar esto. Ver como imagen y dar click en el botón. Esto nos da esta versión más cálida de nuestra imagen en escala de grises. A continuación tenemos la función invertida, por lo que copiaremos la función sepia. Agrega esto justo a continuación. Esta es nuestra función invertida. Bajo el efecto invertido también se conoce como una imagen invertida. Se invierten los colores, por ejemplo, un negro se convertirá en blanco y así sucesivamente. Esto nos dará un efecto similar a los negativos fotográficos de estilo antiguo, que solíamos obtener al desarrollar fotos. Para invertir, no necesitamos usar esta sección gris, por lo que podemos eliminar esta línea aquí, en su lugar, necesitamos deducir el valor de 255 de cada uno de nuestros colores. El motivo por el que hacemos esto es porque un valor RGB irá de 0-255. Si deducimos 255, esto nos dará el efecto contrario. Para los datos i, que es rojo y deducir los datos i. valor verde, hacemos exactamente lo mismo, esto es 255, para luego deducir datos i más 1. El azul, esto es 255, y luego deducir datos i más 2. Entonces coloreamos esto con nuestro botón y este botón es la posición 2, y el nombre de la función es invertido. Probemos esto. Aquí está el expediente. Este ahora también está funcionando. Ahora, ya tenemos nuestros primeros tres botones enganchados, ahora vamos a pasar al siguiente video, donde luego cambiaremos todos los valores de píxel para darnos nuestros cuatro efectos finales. 10. Añadir efectos adicionales: Las siguientes funciones de archivo que vamos a agregar, sólo van a ser un caso de cambiar alrededor de nuestros valores rojo, azul y verde. Empezaremos con el cambio en nuestros valores rojo, verde y azul para ser el rojo, el azul y el verde. Agarremos nuestra última función y podemos duplicar esto justo debajo. El nombre de la función va a ser rbg. Lo que queremos hacer aquí es cambiar el rojo, el verde y el azul para luego ser rojo, azul y luego verde. Para éste, el rojo se está quedando igual todo lo que necesitamos hacer es establecer el primer valor para que sea igual al rojo, que es dato [i]. El segundo valor que está justo aquí, éste va a ser igual al azul. El azul es nuestro tercer valor de i más 2, cambiemos esto. Entonces nuestro tercer valor va a ser verde, que es i más 1. Este es nuestros colores libres ahora cambiados. No obstante, aunque con esta función, hay un pequeño problema. Establecemos el valor rojo para que sea igual al valor rojo, que está completamente bien. Entonces establecemos cualquier valor verde para que sea igual al azul, lo cual también está bien. No obstante, aunque ahora hemos reasignado el valor de pantalla para que sea de un color diferente. Ahora, cuando tratamos de asignar este color verde al final aquí, ahora se está reemplazando este. Esto significa que no es el color verde original para cada bucle después de nuestro primero. Si estamos anulando alguno de estos valores y luego reutilizarlos, entonces necesitamos almacenar el color original dentro de una variable. Pondremos una const, y este es nuestro valor verde. Establezca esto igual a los datos i más 1. Este siempre va a ser el valor verde original. Por lo tanto, cuando obtengamos esto va a cambiar. Pero también podemos acceder al valor verde original después de haber cambiado esto también. Sólo para recapitular, cuando recorremos todos nuestros píxeles, estamos anulando nuestro valor verde con este azul. Por lo tanto, cuando intentemos usar esto hacia abajo en la parte inferior, una vez más, ya no tendremos el color original. Por lo tanto, necesitamos almacenar esto en una constante justo arriba. Ahora duplicemos nuestro click “Listener” pongamos en el número 3, cualquier función es rbg. Vamos a intentarlo, elegimos un nuevo archivo. Nuestra función ahora está funcionando. Pasemos ahora a intercambiar nuestros valores rojo, verde y azul por un azul, verde y rojo, así que copie esta función. El segundo se va a llamar bgr. El primer color que estamos reemplazando nuestro rojo por el valor azul. Se trata de datos i plus 2. El segundo valor va a ser verde, y éste es i más uno. El tercer valor es nuestro color de rojo, que son los datos i. Pero, al igual que arriba, estamos reemplazando nuestro valor de datos i por un color diferente. Por lo tanto, podemos almacenar nuestros datos originales i dentro de una variable llamada roja y establecer esto como nuestro tercer valor. Vincula esto a nuestro botón. Este es el botón número 4. El nombre de la función de bgr. Probemos esto. El color bgr también está funcionando. Tenemos dos más, el siguiente es gbr, así que copia nuestra última función. Denominamos esto, el primero que necesitamos cambiar es nuestro color verde. Necesitamos establecer i plus 1. El segundo valor es azul, que es nuestro i plus 2. El tercero es nuestro valor rojo, que son los datos [i]. Al igual que con la función de pérdida, estamos anulando los datos [i]. Podemos hacer uso de esta constante roja y actualizarla como nuestro tercer valor. Podemos vincular esto a nuestro botón, que es el botón número 5, y al nombre de la función de gbr. Probemos este, elige nuestro archivo. Este también está funcionando ahora que nos mueve al último botón, que es reemplazar nuestros valores rojo, verde y azul por verde, rojo y azul. Duplica nuestra función llamada grb. El primer valor es verde, y esto está actualmente establecido, por lo que está bien. El segundo valor del rojo son los datos [i] y como estamos actualizando esto durante el bucle, también podemos hacer uso del color rojo original, cual se almacena en esta constante. El último valor es permanecer exactamente igual. Esto también es azul 2. Se trata de datos i plus 2. Podemos vincular esto a nuestro último botón dentro de esta sección y este es el botón número 6, y el funcionamiento de grb. Pasado al navegador. Haga clic en este botón y nuestra última función ya está funcionando. Esto ahora es todos nuestros efectos de imagen ahora funcionando. Para terminar este proyecto en el siguiente video, vamos a configurar nuestro botón claro para eliminar cualquier efecto y restablecer la imagen original y además configurarlo para que podamos descargar nuestra foto desde el navegador. 11. Cómo borrar y descargar la imagen: El paso final para este proyecto es agregar la funcionalidad para borrar cualquier efecto de la imagen original, y también configurar este botón Descargar también. Empezaremos con el botón Borrar que va a eliminar cualquiera de los efectos aplicados y reinstaurar la imagen original. Aplicar esto es bastante sencillo. Todo lo que vamos a hacer es escribir una función que activará cuando se presione el botón Borrar. Esto accederá entonces a los resultados originales del lector de archivos, y luego podremos configurarlo para que sea la fuente de imagen. Volvamos a nuestro guión y vamos a crear una nueva función llamada ClearChanges. En primer lugar, hagamos un registro de consola para nuestro FileReader, y luego podemos llamar a nuestra función desde nuestro botón Borrar, que es el índice número 7. Vamos a probar esto. Encima en el navegador podemos entrar en las herramientas de Desarrollador, en la Consola. Si hacemos click en el Borrar, ahora tenemos acceso a nuestro FileReader. Al igual que antes de establecer una imagen, vemos que el resultado se establece en nulo. Pero si fuéramos a subir alguna imagen y luego dar click en Borrar, entonces obtenemos un nuevo resultado de FileReader con los resultados de nuestra imagen. Ahora podemos acceder a este FileReader.result, y luego establecer la fuente de la imagen. Quitemos el registro de la consola. Entonces podemos acceder a nuestra variable de imagen, y establecer la fuente para que sea igual al reader.result. Vamos a probar esto. El primero que tenemos que hacer es aplicar cualquier efecto como invertir. Despeja esto, y ahora tenemos acceso a la imagen original. Por último, también tenemos el botón Descargar, que va a permitir al usuario descargar la imagen después de haber colocado algún efecto. Pasado a nuestro guión, podemos crear esto como una función llamada descarga. Entonces dentro de aquí vamos a crear una constante para almacenar nuestra imagen. Recortamos la imagen que quieres del lienzo, y luego usamos un método llamado ToDataUrl. ToDataUrl devolverá la URL de nuestra imagen de lienzo en un formato de imagen PNG predeterminado. Si quisiéramos esto en un formato diferente, podríamos cambiar esto para que sea image.jpeg. Si el soporte del navegador lo permite, también podemos usar WebP2. Simplemente voy a considerar esto como el PNG predeterminado, y como se mencionó antes, este ToDataUrl devolverá la URL de la imagen. ¿ Cómo vamos realmente a descargar esta imagen? Bueno, podemos descargar una URL de imagen con un enlace. Podemos crear un enlace usando el elemento a, y la forma en que lo hacemos es document.CreateElement, que creará un enlace para nosotros, y podemos crear nuestro enlace dentro de aquí, que es un elemento. Almacenar esto dentro de una constante llamada enlace. Al igual que cualquier enlace HTML regular, también podemos acceder a esto, y establecer el href. El href es la URL a la que vamos a enlazar, y ya tenemos nuestra URL justo encima almacenada dentro de esta variable de imagen. A continuación, también vamos a acceder a nuestro enlace, y agregar el atributo de descarga, configurando esto como igual para que sea image.png. Esta descarga atributos que acabamos de agregar a nuestro enlace especificarán que el objetivo se descargará cuando el usuario haga clic en este enlace. Esto significa que cuando un usuario hace clic en este enlace, descargará lo que se establezca en el href, que es nuestra imagen. Lo que efectivamente hemos hecho ahora es crear un elemento de enlace HTML falso, que no hemos mostrado en el navegador. Esto significa que debido a que el enlace no se está mostrando en el navegador, no podemos hacer click en él de la forma habitual para descargar esta imagen. En su lugar, podemos simular un clic del ratón sobre un elemento utilizando el método click. Para acceder a nuestros elementos de enlace de voluntad, llame al método click, y vinculemos esta función de descarga con nuestro botón. Este es el botón número 8, que activará nuestro método de descarga y podemos seleccionar la imagen para probar esto. Elija cualquiera de estos efectos, haga clic en Descargar. Parece que hay un problema, así que vamos a entrar a la consola, podemos hacer clic derecho e inspeccionar. Ya veremos Canvas.ToDataUrl no es una función, así que vamos a nuestra función de descarga. Creo que solo necesitamos cambios para ser mayúsculas para URL. Probemos esto. Elige un archivo. Haga clic en el Descargar, y nuestra imagen ya está descargada. Esto ahora nos deja con un botón Borrar y Descargar que funciona. Gracias por tomar este proyecto, y los veré en el próximo. 12. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.