Vamos a aprender a implementar un Sistema Editor de Imágenes en Javascript con el que fácilmente se pueden cargar imágenes y editarlas en línea, desde los aspectos de brillo, saturación, inversión de color y escala de grises.

Esta aplicación tiene las opciones de Girar y Voltear la imagen a editar, en ángulos de 90 grados, también es posible voltear la imagen horizontal y verticalmente.

En adición es posible resetear los cambios aplicados para restablecer. El sistema puede generar un nuevo archivo, con los cambios aplicados que al pulsar sobre el botón que dice Guardar Imagen.

Explicación del Sistema Editor de Imágenes

El sistema utiliza funciones con las que se realizan los diferentes procesos, las principales funciones son loadImage, applyFilter, filterOptions, updateFilter y rotateOptions entre otros. Estas funciones se ejecutan desde el archivo script.js que es quien lleva la lógica del negocio.

La aplicación consta de tres archivos un llamado index.html, otro llamado style.css y script.js, el formulario y todo lo que ve el usuario final, sucede desde el archivo index.html.

El archivo llamado style css es el que contiene todo lo visual de la aplicación, como los colores de fondo y los botones de la aplicación.

Descarga he implementación del proyecto en JavaScript

El siguiente es el enlace del repositorio donde tengo el proyecto colgado en GitHub:

Como es una página estática, no se requiere utilizar un backend, no debes instalar ningún servidor basta con descargar el proyecto y ejecutar la página index.html

Subida del Sistema Editor de Imágenes en Javascript a un hosting

En una publicación previa explico como subir un proyecto similar a este a GitHub Pages si deseas subirlo a un hosting como hostinger en el siguiente vídeo explico la forma de hacerlo:

Cualquier duda quedo al pendiente !!