Sistema Editor de Imagens em Javascript

Sistema Editor de Imagens em Javascript

Vamos aprender como implementar um Sistema Editor de Imagens em Javascript com o qual as imagens podem ser facilmente carregadas e editadas online, desde os aspectos de brilho, saturação, inversão de cores e escala de cinza.

Este aplicativo tem as opções de Girar e Virar a imagem a ser editada, em ângulos de 90 graus, também é possível virar a imagem na horizontal e na vertical.

Além disso, é possível redefinir as alterações aplicadas para redefinir. O sistema pode gerar um novo arquivo, com as alterações aplicadas, ao clicar no botão que diz Salvar Imagem.

Demonstração do Sistema Editor de Imagens em Javascript

Implementei uma demonstração do aplicativo que você pode ver no link a seguir:

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

Explicação do Sistema Editor de Imagens

O sistema utiliza funções com as quais os diferentes processos são executados, as principais funções são 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.

A aplicação consiste em três arquivos, um chamado index.html, outro chamado style.css e script.js, o formulário e tudo o que o usuário final vê acontece a partir do arquivo index.html.

O arquivo chamado style css é aquele que contém todos os aspectos visuais do aplicativo, como as cores de fundo e os botões do aplicativo.

Download e implementação do projeto em JavaScript

Segue o link do repositório onde tenho o projeto postado no GitHub:

Sistema Editor de Imagens em Javascript

Como é uma página estática, não é necessário usar backend, não é necessário instalar nenhum servidor, basta baixar o projeto e executar a página index.html

Upload do Sistema Editor de Imagens em Javascript para uma hospedagem

Em um post anterior eu explico como fazer upload de um projeto semelhante a este para o GitHub Pages Se você quiser carregá-lo para uma hospedagem como hostinger no vídeo a seguir, explico como fazê-lo:

Carregar página com PHP + banco de dados (MYSQL) para uma hospedagem

Estou atento a qualquer dúvida!

Leave a Reply

O seu endereço de e-mail não será publicado.