Java Script

Obrada slike
Osnove programiranja u
JavaScriptu

pripremila Marijana Polić Kuko

 ✗ Napravimo inverz
slike!

pripremila Marijana Polić Kuko

2
 ✗ Napravili smo
inverz slike!

pripremila Marijana Polić Kuko

3
 ✗ Kako se slika zapisuje na računalu?
✗ Kako jednostavno pomoću JavaScripta i web-
preglednika pročitati sve pixele?
✗ Kako pomoću petlje i odluka promijeniti sliku ili
samo njene dijelove?

pripremila Marijana Polić Kuko

4
 Kako se slika zapisuje na
računalu?

pripremila Marijana Polić Kuko

5
 Pikseli

podpikseli

Ova svjetla zajedno čine digitalnu sliku.

pripremila Marijana Polić Kuko

6
 Pojmovi:
✗ Rezolucija – broj koji nam kaže koliko
piksela ima na ekranu.
✗ širina (width)
✗ visina (height)
veća rezolucija – kvalitetnija slika
Mjera za rezoluciju:
✗ megapiksel (milijun piksela)
✗ dpi (dots per inch) – koliko točkica možemo
smjestiti na jedan inch
✗ Dubina boje
✗ broj bitova koji se koristi za
prikaz boje
pripremila Marijana Polić Kuko
7
 Računalo sprema tri boje i
pomoću njih može prikazati
sve boje.
0 – nedostatak svijetla
255 – najveća vrijednost

✗ Svaki kanal prikazan je sa 8 bitova = 1 bajt  256 kombinacija

pripremila Marijana Polić Kuko

8
 Kako rastaviti sliku na
crveni, plavi i zeleni kanal?

pripremila Marijana Polić Kuko

9
 ✗ Osim informacije o intezitetu boje, svaki piksel ima informaciju o
prozirnosti (oznaka a: Alpha) – u našim primjerima ćemo ovu
informaciju zanemariti.
✗ Slika je zapisana u obliku niza.
✗ U svakom četvrtom bajtu nalazimo informacije o pojedinom pikselu.

pripremila Marijana Polić Kuko

10
 Primjer:

pripremila Marijana Polić Kuko

11
 ✗ Na web-stranicama element canvas omogućuje rad sa
slikama (koristili smo ga pri crtanju smajlića).
Omogućuje jednostavno crtanje i dohvaćanje
podataka.
✗ Sad će nam služiti za obradu slike.

pripremila Marijana Polić Kuko

12
 ✗ Ono što je trenutno prikazano na canvasu predstavlja
sadržaj – Context
✗ Dohvaćamo sadržaj i spremamo ga u varijablu grafika

pripremila Marijana Polić Kuko

13
 ✗ Važno je navesti početne koordinate, širinu i visinu.

pripremila Marijana Polić Kuko

14
pripremila Marijana Polić Kuko
15
 http://editcs.surge.sh/zadaci.
html
✗ 1. primjer
Izdvojiti crveni, zeleni i plavi kanal

pripremila Marijana Polić Kuko

16
 1. zadatak

pripremila Marijana Polić Kuko

17
 2. zadatak

pripremila Marijana Polić Kuko

18
 3. zadatak

pripremila Marijana Polić Kuko

19
 4. zadatak

pripremila Marijana Polić Kuko

20
 5. zadatak

pripremila Marijana Polić Kuko

21
pripremila Marijana Polić Kuko
22
 7. Zadatak

pripremila Marijana Polić Kuko

23
 Siva boja:

pripremila Marijana Polić Kuko

24
 8. c) zadatak

pripremila Marijana Polić Kuko

25