Sistema Editor de Imágenes en Javascript

Sistema Editor de Imágenes en Javascript

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.

Demo del Sistema Editor de Imágenes en Javascript

De la aplicación implementé un demo que puedes ver en el siguiente enlace:

https://mauriciosevilla.com/editor-imagenes/index.html

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:

Sistema Editor de Imágenes en Javascript

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:

Subir pagina con PHP + Base de datos (MYSQL) a un Hosting

Cualquier duda quedo al pendiente !!

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.