Tag: canvas

Categories
main mozilla po polsku tech

Zmiana rozmiaru zdjęcia z uwzględnieniem zawartości

Poniższy tekst jest tłumaczeniem artykułu “Content aware image resizing“, zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest Christopher Blizzard. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Obejrzyj demo w Firefox 3.5.

200px-nasa-cairZmiana rozmiaru obrazka z uwzględnieniem zawartości jest metodą skalowania obrazka bez zniekształcania zawartości, innymi słowy: nielinearne rozszeranie obrazków. Algorytm ten został po raz pierwszy opisany przez Shai Avidan i Ariela Shamira i opublikowany w 2007 (“Seam Carving for Content-Aware Image Resizing.”)

Od tego czasu powstało kilka świetnych implementacji tego algorytmu dostępnych na licencjach wolnego oprogramowania takich jak wtyczka do Gimpa czy CAIR – aplikacja napisana w C++.

Teraz, dzięki Canvas i językowi JavaScript możliwe jest wykonanie tego w przeglądarce bez użycia wtyczki.

Od wersji 1.5, Firefox oferuje możliwość manipulacji bitmapą z poziomu API Canvas. Wersja 3.5 nie tylko wprowadza jeszcze szybszy silnik JavaScript, ale też dodaje nową metodę dla Canvas – createImageData – umożliwiając tworzenie nowych rozwiązań.

Na potrzeby tego dema został zaimplementowany fragment algorytmu do zmiany rozmiaru obrazka z uwzględnieniem zawartości. Szerokość zdjęcia może byc zmieniana dynamicznie bez zmiany jego wysokości. Ta implementacja korzysta z wykrawania szwów (seam carving) do zmiany rozmiary obrazka, śledząc mało widoczne pionowe linie.
200px-cair-stepsJest to cztero-krokowy algorytm zagnieżdzony. Jedna iteracja zmienia rozmiar obrazka o jeden piksel. Na początek obrazek jest pobierany do kontekstu Canvas, a następnie rozpoczyna się iteracja:

  1. Zdjęcie jest przeliczane do skali szarości
  2. Obliczane są krawędzie na zdjęciu (Użyty jest algorytm o nazwie Sobel convolution) oraz jego matryca energetyczna
  3. Wykrywane są szwy o najmniejszej energii (pionowe linie o grubości 1 piksela nieprzerwanie idące od góry do dołu matrycy energetycznej)
  4. Nastepnie piksel z wykrytego szwu jest usuwany z oryginalnego zdjęcia i wynik jest wklejany jako źródło dla kroku 1

Każdy z poprzednich kroków przechowuje w rozmiarze źródła zdjęcia całą matrycę danych. Choć te matryce nie są pełnymi zdjęciami, tylko artefaktami po algorytmie, przechowywanie ich jest znacznie wygodniejsze niż użycie prostych tablic (JS Array) i dlatego własnie wykorzystana jest tu metoda kontekstu Canvas o nazwie createImageData. Jedną z zalet zastosowania takiego procesu jest to, że można pokazywać pośrednie kroki które zostały wykonane w trakcie obliczania efektu końcowego.

To demo pokazuje w jaki sposób można wykonać bardziej inteligentne zmienianie rozmiar obrazka niż proste spłaszczanie pikseli w CSS. Mając możliwości manipulowania obrazek oraz moc obliczeniową dostępną z poziomu przeglądarki otwiera nowy zakres możliwości do tworzenia aplikacji WWW prezentujących dane wizualne użytkownikom. A to demo to przecież korzysta tylko z ułamka tych możliwości…

Categories
main mozilla po polsku tech

Mozilla naprawia IE – piekło zamarza?

Ostatnio pojawiły się artykuły na temat kilku projektów wewnątrz Mozilli mających pomóc unowocześnić Internet Explorera, “No browser left behind” Vlada dodający Canvas do IE, czy ScreamingMonkey dający obsługę nowoczesnego JavaScriptu (w założeniu JS2.0) w IE.

Dostałem kilka maili z pytaniami w tej sprawie, parę osób podpytało na Jabberze, a na vortalu DobreProgramy komentatorzy spędzają czas radośnie próbując znaleźć wytłumaczenie dla tego ruchu.

Co ciekawe, wśród tak wielu teorii ukutych na prędce zabrakło tej jednej, rzeczywistej. I wydaje mi się to bardzo symptomatyczne dla współczesnego myślenia, że tego typu wytłumaczenia rzadko przychodzą do głowy.

Wytłumaczenie to brzmi – celem statutowym Mozilli Foundation jest promocja wyboru i innowacji w Internecie.

Takie trudne? My nie walczymy o zajęcie rynku przez naszą przeglądarke. My walczymy o to, aby Internet sie rozwijał i uznaliśmy, że optymalnym sposobem do tego jest stworzenie i promocja przeglądarki, która zagwarantuje rozwój Internetu w modelu opisanym w Manifeście Mozilli (tłum pl w trakcie prac).

Mozilla jest otwartym projektem i działa bardziej jak Bazar, czy środowisko naturalne, niż jak Katedra – zorganizowana i uporządkowana. Wiele rzeczy to inicjatywy oddolne i tak jest w tym przypadku. Ludzie wewnątrz projektu chcą poprawiać świat i jeśli Vlad zauważył, że przeszkodą w adaptacji technologii Canvas jest brak jej wsparcia w IE oraz udało mu się opracować jak to dodać, to jest to idealnie wpisane w model jaki chcemy promować w Internecie.

Tym właśnie, tą różnicą w podejściu, tym, że celem nr.1 każdej firmy są pieniądze, a standardy, otwartość, użytkownicy są środkiem do tego celu, a u nas jest, z definicji fundacji non-profit, odwrotnie wyróżniamy się na rynku i to czyni naszą odpowiedzialność ogromną, a naszą pozycję i nasze możliwości unikalne.