Obejrzyj demo w Firefox 3.5.

Zmiana 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.
Jest 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…

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.