Jaki język do manipulacji obrazem?

Cześć,

jaki język byłby najlepszy do stworzenia funkcjonalności polegającej na zaznaczaniu punktów na obrazie, rysowania na nim obszarów, grupowania obrazów, tworzenia relacji między nimi, a także zmianie podstawowych właściwości obrazu jak np. wycinanie, zmiana rozdzielczości? Powinno to działać w formie aplikacji webowej. Pisząc o obrazach mam na myśli nie zdjęcia kotków czy pejzaży, lecz np. skany/fotografie dokumentów, odręcznie narysowanych, kolorowych schematów itp. Chodzi o to, żeby po wrzuceniu takiego zdjęcia (w popularnych formatach typu JPG, PNG) można było nakładać nań coś w rodzaju warstwy, tylko ważne jest to, aby nic się nie rozjeżdżało, że np. jeśli ktoś zaznaczy konkretny punkt na obrazie, to w innej przeglądarce, rozdzielczości czy urządzeniu mobilnym to zaznaczenie (może być w formie zakreślonego obszaru) było w tym samym miejscu. Jaki zestaw technologii by tu pasował?

Jak obrazów to tylko Piet:

http://www.dangermouse.net/esoteric/piet.html

Piet w akcji:

http://www.99-bottles-of-beer.net/language-piet-1269.html

Obawiam się, że Piet nie spełni moich oczekiwań :) Wyszukałem, że jest jakaś biblioteka Pillow do Pythona. Co sądzicie, czy to będzie odpowiednie?

Pillow działa po stronie serwera, a Ty chcesz edytor w przeglądarce.

Jeśli chcesz robić to po stronie serwera to ImageMagick wydaje się najrozsądniejszą opcją. Ma mniej więcej takie możliwości jak GIMP tyle, że obsługuje się z linii poleceń, więc jest łatwy w automatyzacji, jest też w formie biblioteki z interfejsami do większości popularnych języków (C, PHP, Ruby, Python, itp). https://www.imagemagick.org/script/index.php
Jeśli po stronie klienta to pewnie Javascript/Canvas?

Chcę, żeby informacje napisane na obrazie, w postaci warstw zaznaczonych punktów, obszarów, strzałek itp. były zapisywane, chyba niekoniecznie jako nadpis tego obrazu (bo nie ma potrzeby zmieniać pliku), tylko jako zestaw danych przypisanych do obrazu, w każdym razie żeby z zewnątrz wyglądało to trochę tak jak na Facebooku albo na Google Maps, z tym że nie tylko chodzi mi o "piny", ale też np. strzałki, elipsy i swobodne zaznaczenia różnymi kolorami. No i to ma być aplikacja webowa, a więc zapis jest na serwerze. Wiem, że canvas pozwala na rysowanie kształtów, ale czy też na rysowanie po istniejącym obrazie w JPG? Ten ImageMagick wydaje mi się ciekawy. Thx.

@mundeck: tak

mundeck napisał(a):

No i to ma być aplikacja webowa, a więc zapis jest na serwerze. Wiem, że canvas pozwala na rysowanie kształtów, ale czy też na rysowanie po istniejącym obrazie w JPG? Ten ImageMagick wydaje mi się ciekawy. Thx.

Wydaje mi się, że wciąż nie bardzo rozumiesz co chcesz zrobić...
Z tego co widzę, to chcesz zrobić edytor, w którym obraz może być edytowany i zapisywany jako PLIK PROJEKTU na serwerze, żeby można było do tego projektu wrócić i nad nim pracować w innym miejscu, edytować położenie warstw, punkty itp.

Nawet jeśli będziesz generował plik wynikowy w ImageMagick'u po stronie serwera, to w przeglądarce ktoś będzie musiał jakoś wprowadzić dane wejściowe: wczytać plik obrazu, ustawić położenia strzałek, nanieść punkty. To wszystko będzie musiało mieć jakąś wizualizację. I teraz:

• jak ktoś będzie chciał zapisać plik projektu, to będziesz musiał zapisać dane wejściowe na serwerze, czy plik obrazu, położenia strzałek, punktów itd.
• jak ktoś będzie chciał zapisać obrazek (png/jpg) na swoim komputerze, to będziesz musiał na serwer wysłać dane wejściowe i wypluć te dane przetworzone ImageMagickiem.

Oszczędzisz sobie pracy, jak wszystko będzie edytowane w przeglądarce (javascript), a na serwerze co najwyżej zapiszesz pliki projektu, jeśli są do czegoś potrzebne.

Ja dokładnie wiem, co chcę zrobić, jak to ma wyglądać od strony użytkownika, nie wiem tylko jakiego zestawu technologii użyć do wykonania tego, niezależnie od tego, jaka część pracy będzie wykonywana po stronie przeglądarki, a jaka po stronie serwera. Dla mnie nie ma problemu, jeśli rysowanie/zaznaczanie będzie się odbywało po stronie przeglądarki (inaczej zresztą być nie może). Ważne, żeby to było zapisane jako np. wspomniany przez Ciebie plik projektu. Ale nie wyobrażam sobie, by było potrzebne generowanie pliku JPG z naniesionymi warstwami. Taka funkcjonalność nie będzie potrzebna. Plik graficzny, który jest wgrany do aplikacji, powinien być już tam na stałe i tylko poddawany obróbce, czyli podstawowe funkcje typu crop, scale i zaznaczanie fragmentów obrazu. Przy czym ciekawa i chyba niełatwa do zrobienia funkcja będzie taka, że owe zaznaczenie na obrazie powinno w jakiś sposób odnosić się do innego zaznaczenia innego obrazu. Np. mam JPG z jakimś schematem, rysuję na nim jakieś kółko i daję komentarz "o, ten element jest zły" i potem na drugim zdjęciu rysuję kółko i dodaję komentarz "o, to powinno wyglądać tak jak tutaj", tylko gdzieś musi zostać zapisana informacja o tym, że te dwa fragmenty dwóch różnych obrazów odnoszą się do siebie. W sumie tego typu manipulacje można w jakimś stopniu wykonać np. w Google Slides (czy jak to się tam nazywa) i UXPin, ale tutaj potrzeba rozwiązania dedykowanego, bo jeszcze idzie o to, żeby potem grupować te obrazy, tworzyć z nich coś w rodzaju folderów i same foldery też będą powiązane w strukturze drzewiastej...

mundeck napisał(a):

Ale nie wyobrażam sobie, by było potrzebne generowanie pliku JPG z naniesionymi warstwami.

No po prostu, gdy użytkownik uzna, że jego projekt jest już gotowy i będzie chciał go wydrukować, albo wysłać komuś swoją pracę, to będzie musiał zapisać plik czytelny dla odbiorcy ;)

Cześć :)

ja bardzo polubiłam imagemagick. Do użycia razem z Ruby polecam gem MiniMagick. Napisałam też instrukcję krok po kroku, jak stworzyć przykłądową aplikację z uzyciem tej biblioteki. Teraz piszę kolejną, już stricte odnośnie przetwarzania samych pixeli. Link do apliakcji jest tutaj: https://justynawojtczak.com/pl/aplikacja-logo-na-zdjeciu-znak-wodny/ Chętnie odpowiem na więcej pytań, jesli będę w stanie :)