Home

Do zrobienia

• Komponent ChangeParameters
  • Optymalizacja -> 1 krok - pętla do danego efektu ma się wykonać tylko wtedy, gdy został on zmieniony. 2 krok -> jedna pętla na wszystkie efekty [KKM]
  • Zablokowanie przycisków do momentu, gdy nie ma wczytanego obrazka (inputów, sliderów). [PAT]
  • Odczytywanie koloru z piksela. Szukać tu: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas [PPM]
  • Przy małych obrazkach canvas ma być ładny [KKM]
  • Przycisk 'Save as *. jpg' [KKM]
  • Przycisk 'UNDO' przy końcu slidera - będzie on resetował stan (to samo co onDoubleClick)
  • Wypisywanie obrazka (np 5 Mpix). Jeśli zdjęcie jest większe niż 5,5 Mpixa, to wyświetlamy gdzieś czerwony napis 'bla bla bla, jest to za duze i moze skrypt wolno działać' (po engliszu) [KKM]
  • 3 checkboxy z podpisami r g b, wyświetlają warstwy rgb [PAT]
  • Dodanie blur z opacity do div-a z komponentem Parameters, gdy są zablokowane [PAT]
  • Dopasowanie rozmiaru Canvas do ekranu w Parameters [KKM]
  • Dodać this.props.setIsLoaded(false); do funkcji

_handleImageChange(e) {
    e.preventDefault();
    **this.props.setIsLoaded(false);**
    let reader = new FileReader();
    let file = e.target.files[0];
    this.getImageSize(file);
    this.props.resetParameters();
    
    reader.onloadend = () => {
      this.props.setIsLoaded(true);
      this.setState({
        file: file,
        imageViewUrl: reader.result
      });
    }
    reader.readAsDataURL(file);
  }

* [ ] przycisk 'Reset' nie uwzględnia kontrolki odwracania kolorów ('invert color'). Wczytywanie nowego obrazka też nie resetuje tej kontrolki
* [ ] (na koniec) Zrobić screeny oraz opisać moduł

• Komponent Filters

  • W widoku pełnego podglądu obrazka, po kliknięciu kliknięciu na przycisk, obrazek ma się wyświetlić 1:1. Powtórne kliknięcie na przycisk z powrotem wyświetla obrazek mieszczący się na ekranie
  • (na koniec) Zrobić screeny oraz opisać moduł

• Ogólnie, cały projekt

  • Opisać cały projekt (ogólny opis), opisać użyte technologie oraz opisać sposób instalacji

---

---

---

Przesuwajka: https://codepen.io/ElJefe/pen/XJdpEP

Font Awesome

Dodałem ikonki z font awesome. Instrukcja z korzystania: https://fontawesome.com/how-to-use/on-the-web/using-with/react

W skrócie: w komponencie, w którym chcemy uzywać ikonek importujemy takie rzeczy:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPencilAlt, faMinus, } from '@fortawesome/free-solid-svg-icons'

Następnie faPencilAlt oraz faMinus to ikonki, jakie chcemy użyć. Poniżej importów (ale przed deklaracją komponentu) dodajemy te ikonki do biblioteki:

library.add(faPencilAlt);
library.add(faMinus);

Teraz możemy użyć je w kodzie, w taki sposób: (metoda render)

<FontAwesomeIcon icon="pencil-alt"/>
<FontAwesomeIcon icon="minus"/>

Listę dostępnych ikonek można znaleźć tutaj: https://fontawesome.com/icons?d=gallery&m=free