1 / 14

Završni rad JavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija

Završni rad JavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija. Petar Slavić. Sadržaj. Zadatak završnog rada Korištene tehnologije HTML5 HTML5 kompatibilnost Canvas API Prije i poslije aplikacija KineticJS Galerija Prije i poslije efekt

jennifer-jenkins
Download Presentation

Završni rad JavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Završni radJavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija Petar Slavić 06.03.2012.

  2. Sadržaj • Zadatak završnog rada • Korištene tehnologije • HTML5 • HTML5 kompatibilnost • Canvas API • Prije i poslije aplikacija • KineticJS • Galerija • Prije i poslije efekt • Učitavanje korisničkih fotografija 06.03.2012.

  3. Zadatak završnog rada • Napraviti aplikaciju za prikaz prije i poslije fotografije kao na slici • Potrebno: • Dvije slike • Pomični element • Nedostatci • Nemogućnost korištenja više slika 06.03.2012.

  4. Korištene tehnologije • HTML i jQuery • Karakteristike korištenih tehnologija: • Jednostavna manipulacija i pristupanje elementima preko jQuery i CSS • Jednostavno korištenje animacija • Mobilnost zbog korištenja “plugin” • Relativno kratak kod 06.03.2012.

  5. HTML5 • Nova generacija HTML • Dizajniran da bude cross-browser • Uvodi nove elemente , API : • Video i audio • Canvas API – Canvas Text Api • Geolocation • FileSystem API • File API .... 06.03.2012.

  6. HTML5 Kompatibilnost • Relativno nova tehnologija – slaba kompatibilnost • Prepoznavanje kompatibilnosti : • Modernizr biblioteka • Ručna provjera 06.03.2012.

  7. Canvas API • 2D podloga za crtanje • Koristi direktni (“immediate”) mod crtanja • Koristi se za: • Naprednu grafiku ( 2D i 3D) • Animacije • Problem kompatibilnosti kod Internet Explorera • Riješenje problema : • Excanvas biblioteka 06.03.2012.

  8. Canvas API • Iscrtavanje se obavlja preko Context(“2d”) • Context je osnovna funkcija za crtanje svih oblika na Canvas elementu 06.03.2012.

  9. Prije i poslije aplikacija • Po uzoru na originalnu aplikaciju napravljena je ova nova aplikacija sa dodanim svojstvima kao što su : • Galerija slika • Direktan pristup “prije i poslije” efektu • Učitavanje korisničkih fotografija • Aplikacija koristi tehnologije: • HTML5 Canvas API • HTML5 File API • KineticJS biblioteku 06.03.2012.

  10. Prije i poslije aplikacija • KineticJS biblioteka omogućuje više slojni način crtanja na Canvas elementu • Sadrži slojeve: • 1. “buffer” sloj • 2. “backstage” sloj • 3. korisnički sloj • 4. kompozicija slojeva • Svaki oblik na sloju je objekt 06.03.2012.

  11. Galerija • Svaka slika u galeriji je objekt sa svojim svojstvima • Odabirom određenih slika prebacuje se iz galeriju u “prije i poslije efekt” 06.03.2012.

  12. Prije i poslije efekt • Svaka slika za “prije i poslije efekt”se nalazi u svom sloju • Efekt se ostvaruje manipulacijom piksela (mijenja se vrijednost RGBA) 06.03.2012.

  13. Učitavanje korisničkih fotografija • Pomoću File API (File Reader API) omogućeno je učitavanje korisničkih slika • Nakon odabira , slike se prebacuju u “Prije i poslije efekt” • Povratna informacija File Reader API je u obliku 06.03.2012.

  14. Hvala na pažnji • Pitanja? 06.03.2012.

More Related