Introdução
Este projeto irá guiá-lo através do processo de criação de uma ferramenta simples de corte de imagens. No final, você terá uma aplicação interativa que permite aos usuários carregar, exibir e cortar imagens.
👀 Pré-visualização
🎯 Tarefas
Neste projeto, você aprenderá:
- Como criar a estrutura HTML para a ferramenta de corte de imagem
- Como estilizar a página web usando CSS para torná-la visualmente atraente
- Como inicializar variáveis e event listeners (ouvintes de eventos) usando JavaScript para lidar com as interações do usuário
- Como lidar com o carregamento e exibição de imagens usando a API FileReader em JavaScript
- Como implementar o mecanismo de corte usando a API Canvas em JavaScript
- Como salvar a imagem cortada e exibir o resultado
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Compreender as tags (etiquetas) e a estrutura HTML
- Aplicar propriedades e seletores CSS de forma eficaz
- Utilizar a sintaxe JavaScript, variáveis e event listeners
- Aproveitar a API FileReader em JavaScript para lidar com uploads (carregamentos) de arquivos
- Implementar a manipulação de imagens usando a API Canvas em JavaScript
