Skip to content

RafaZeero/ztm-rust-image-effects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rust Image Effects

  • Projeto de edição de imagens permite que o usuário faça um upload de uma imagem e receba a imagem feita as devidas transformações, como rotacionar e transformar cores para tons de cinza.
  • Projeto realizado com Rust, html e javascript e o objetivo final era utilizar o Rust para compreender e criar um projeto que utilize Wasm (Web Assembly).
  • Web Assembly é um código de mais baixo nível, em formato binário, ou seja, mais próximo a linguagem das máquinas e de difícil compreensão (na minha opinião). Ele foi utilizado para alterar as características das imagens.
  • O projeto também utiliza Webpack para compilar os módulos do Javascript.
  • Conteúdo aplicado nas aulas de Zero To Mastery.

Índice

Overview

Desafio

  • Esse projeto foi realizado com Rust, e isso, por si só, já foi um desafio!
  • É uma linguagem que eu nunca havia utilizado e o aprendizado nesse projeto foi muito bom!
  • Adicionei ao projeto original a mudança da imagem para 180 graus e ambas as transformações.

Screenshots

Imagem de teste 01: Imagem resultado (rotação 180º):
imagem padrao imagem pós-efeito
Imagem de teste 02: Imagem resultado (rotação 180º E grayscale):
imagem padrao imagem pós-efeito
  • Esse projeto é responsivo e o ideal é que o usuário envie imagens .PNG que não sejam tão grandes, menor que 5mb para um desempenho melhor do aplicativo.

Links

Processo

Construção

Aprendizado

  • O aprendizado que gostaria de destacar é sobre Rust e WebAssembly.
  • Ao iniciar esse projeto da Zero To Mastery, eu acabei indo mais a fundo nos estudos em relação aos dois conteúdos e pude tirar bastante proveito de tudo.
  • Essa parte do código eu acho que foi a que mais me chamou atenção, já que o Rust usa Ownership models, que significa que as variáveis tem donos. Isso foi o mais complexo para mim, porém ao entender isso o código ficou mais compreensível, a exemplo de entender o porquê de usar o borrow (&variável).
 let mut img = load_from_memory(&base64_to_vector).unwrap();
    log(&"Image loaded.".into());

Author

Foto de Rafael Lima do GitHub
Rafael Lima