Risercze są tutaj!

Pobranie wymiarów wczytanego obrazka (moduł ChangeParameters)

W komponencie ChooseImage można napisać poniższą funkcję.

  getImageSize = (file) => {

    this.setState({ // ustawiamy domyślne wartości w state
      width: null,
      height: null
    });
    
    const url = URL.createObjectURL(file); // odczytanie adresu obrazka
    const image = new Image();  // stworzenie pustego obiektu obrazka (przypisanie wlasciwego obrazka nizej)

    image.onload = () => { // na zaladowanie obrazka odczytujemy jego wymiary
      const { width, height } = image; // odczytanie wymiarów
      this.setState({ // tutaj można zrobić zapisywanie tego do state komponentu
        width: width,
        height: height
      });
    };

    image.src = url; // przypisanie adresu obrazka do obiektu obrazka
  };

Funkcja musi być napisana w klasie ChooseImage (jako jedna z metod składowych). Następnie w metodzie _handleImageChange() możemy wywołać ją, tak jak poniżej:

  _handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];
    this.getImageSize(file); // to tutej! to ta linijka z wywoalaniem

     // .... ... .. // dalsza czesc pliku

No i dzięki temu mamy zapisane wymiary w state komponentu. Możemy się do nich odwołać w metodzie render() przez this.state.width oraz this.state.height. I właśnie w metodzie render powinniśmy dodać dodatkowy warunek oraz przekazać do komponentu Canvas propsy z wymiarami:

// metoda render(), komponent ChooseImage
 if (imageViewUrl && this.state.width > 0) {
      $imageView = (<Canvas width={this.state.width} height={this.state.height} name={imageViewUrl}/>);
    }

(został dodany drugi warunek, this.state.width > 0)

---

Efekty do obliczania na canvasie

Gotowe przykłady na Canvasie w JS

https://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Manipulacje typu: odczytywanie koloru pixela, antyaliasing, odwracanie kolorów: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Canvas filter - prawie jak filter w css: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

Na canvas także można nakładać np. efekt winiety: http://jsfiddle.net/W8Ywp/682/

Skala szarości:

Kilka różnych algorytmów do skali szarości: http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/

Kontrast:

https://stackoverflow.com/questions/13939520/formula-for-adjusting-brightness-contrast-on-canvas

gotowe obliczenie do kontrastu: https://stackoverflow.com/questions/2976274/adjust-bitmap-image-brightness-contrast-using-c

https://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-5-contrast-adjustment/

http://thecryptmag.com/Online/56/imgproc_5.html

Jasność:

Do kazdej skladowej dodajemy po prostu odpowiednia wartosc. (+100, itp)

Saturacja (saturation):

http://alienryderflex.com/saturation.html

Dodatkowe info

Warto stworzyc mala funkcje, ktora bedzie pilnowac, by skladowa nie wyszla poza zakres [0, 255]

	function truncate(value)
	{
		if(value < 0) return 0;
		if(value > 255) return 255;

		return value;
	}