Zielony Smok

HTML5 canvas – tutorial

Filtrowanie obrazów

Poniżej przedstawiam 7 filtrów obrazu wyświetlanego na HTML5 canvas.

W związku z tym konieczne jest parę uwag.

Pliki uruchamiane na serwerze

Wszystkie kody wyświetlane są prawidłowo jeżeli pliki je zawierające znajdą się na przykład w Eclipse i wczytywane są z serwera np. Tomcat, nawet na localhost. A oto przykładowe adresy poszczególnych plików:

  • http://localhost:8080/blog/filtrowanie/filtrowanie_kontrast.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_negatyw.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_rozjasnienie.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_sciemnienie.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_sepia.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_skala_szarosci.html
  • http://localhost:8080/blog/filtrowanie/filtrowanie_szum.html

Negatyw

Pliki uruchamiane w przeglądarce

Po uruchomieniu w przeglądarce zamiast obrazu przefiltrowanego, pojawia się obraz źródłowy.

Obraz oryginalny

Przy analizie strony pojawia się taki lub podobny komunikat:

Komunikat o błędzie

W innych plikach pojawia się komunikat o takim samym błędzie.

Kod w WordPressie

Nie pojawia się ani obraz przefiltrowany ani obraz oryginalny. Przyczyny nie znam. Nie ma żadnych komunikatów o błędzie, a kod nie działa. Wymagana jest dokładniejsza analiza, której w tej chwili nie mam czasu przeprowadzać.

Filtry

Obraz oryginalny

Obraz oryginalny

Negatyw

Negatyw

Skala szarości

Skala szarości

Sepia

Sepia

Szum

Szum

Kontrast

Kontrast

Ściemnienie

Ściemnienie

Rozjaśnienie

Rozjaśnienie

Pliki do ściągnięcia

Siedem plików HTML pokazujących poszczególne filtry trafiło do foldera filtrowanie, który możesz ściągnąć stąd: filtrowanie.zip