Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Edytor zdjęć online w Ajaksie

26 lipca 2006

Przez ostatni tydzień firma, w której mam przyjemność pracować, przygotowywała betę narzędzia online do edycji zdjęć i obrazów. Podstawowa funkcjonalość to załadowanie obrazka z URL-a albo dysku, zmiana rozmiarów, przycinanie i obrót o 90°. Wszystko działające na Ajaxie, a jakość obrazka nie pogarsza się (dopóki nie zwiększymy go ponad oryginalne rozmiary).

Edycja obrazka

Dostępna jest złożona historia - nieskończona ilość akcji może być ponowiona oraz cofnięta, a wszystko dzieje się prawie natychmiastowo. Oprócz przycisku Cofnij / Ponów można używać także okienka Historii, gdzie widoczne jest każde przekształcenie (działają skróty Ctrl + Z|Y). Po kliknięciu parę razy na obrót wszystkie akcje są zapisywane, ale wyświetlony zostaje tylko rezultat ostatniego przekształcenia.

Edytor ma parę zachowań, które nie są „standardowe” - ciągnięcie za rogi zdjęcia powoduje relatywne rozszerzanie w pionie i poziomie, a nie po prostu w dwóch osiach. Po wycięciu fragmentu zdjęcia (dwuklik na obszar) i zmianie rozmiaru możliwe jest ponowne włączenie wycinania i objęcie oryginalnej, większej powierzchni. O ile pierwsza opcja najpewniej będzie zmieniona (oraz dodane zostaną aktywne krawędzie), to druga jest całkiem użyteczna - gdyby nie powodowała opóźnień w edycji (wszakże operacje wykonywane są nadal na oryginalnym obrazku).

Z tego co nam wiadomo, edytor działa na Firefoksie 1.5, Explorerze 6 oraz Operze 9 (możliwe, że też w 8.5x), co wydaje się być niezłym osiągnięciem jak na pierwszą wersję wypuszczaną publicznie. ;)

Istnieje także opcja zapisu, ale jako że operujemy na wersji testowej, proszeni jesteście o skomentowanie narzędzia. Oczywiście najmilej widziane są komentarze techniczne, bugreporty. Możecie komentować też tutaj, jeśli chcecie podyskutować nad jakimś problemem, a nie zgłosić go do „martwej” bazy danych.

Szata graficzna jest monotonna, a pewne elementy layotu mogą być niedopracowane. Proszę nie czepiajcie się kodu HTML albo małych błędów wyświetlania jak wychodzenie fieldseta z ekranu zapisywania. ;) Głównym założeniem Fotoeditora jest operowanie na obrazkach - liczą się błędy aplikacji, jak problemy z edycją.

Projekt jest podstawą do dalszych opcji, zbliżających narzędzie do normalnego edytora zdjęć, na przykład takiego jak Picasa. Patrząc na dzisiejszy Internet mogę powiedzieć, że przewaga Flasha w interaktywnych stronach będzie na pewno maleć.

Znane błędy:

  1. Czasem na stronie głównej po kliknięcu na losowy obrazek odświeżana jest strona głowna.

Tagi wpisu: , , , ,

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 26 lipca 2006 o 20:09

Kategorie: JavaScript & DOM, Narzędzia, Web 2.0

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. lego 1 26 lipca 2006, 20:16

    Fajna rzecz, tylko na razie mało ficzerów, przy większych obrazkach trochę widać "mułowatość" przeciągania (zrozumiałe).

  2. RaVbaker 2 26 lipca 2006, 20:18

    Swego czasu gdy przygotowywałem avatarkę z gotowego zdjęcia to takie narzędzie przydałoby mi się od razu. Bo musiałem zmniejszyć tylko rozmiar zdjęcia. A na chwilę obecną to całość prezentuje się obiecująco.

    Oczywiście liczę że przyszłości będą dostępne filtry, zaznaczanie "lasso" itp. bajery... ;-)

  3. Fipaj 3 26 lipca 2006, 20:19

    Niesamowite. I działa całkiem szybko...

  4. Loku 4 26 lipca 2006, 20:33

    Jeśli to nie tajemnica firmy: korzystaliście z jakiegoś frameworka typu echo2, czy może wszystko było pisane od podstaw?

  5. Grucha 5 26 lipca 2006, 20:36

    To że w rogach zmieniamy rozmiar proporcionalnie to bardzo dobra rzecz.
    Czasem mu sie zdarzy nie załadować obrazka.
    Przydało by sie żeby jakieś komunikaty błędu coś mówiące były wyświetlane.

  6. Nemo 6 26 lipca 2006, 20:46

    E tam. Nic nowego, niektóre edytory WYSIWYG dla <textarea> już takie od dawna mają. Trzeba się zaprezentować z lepszą jakością.

  7. KKKas 7 26 lipca 2006, 20:49

    Bug: Gdy przeciągam okno zmian pod panel po lewej, to chowa się pasek tytułowy, a reszta okna jest na wierzchu. IMO okienek nie powinno dać się w ogóle przeciągać poza ekran.

  8. janek 8 26 lipca 2006, 20:51

    Dopóki Fotoeditor nie będzie posiadał przynajmniej tych funkcji, które ma http://pxn8.com/ to nie ma co myśleć o podbijaniu świata. Myślę zatem, że będzie się rozwijał w miarę szybkim tempie. :-)

  9. mcv 9 26 lipca 2006, 20:53

    @RavBaker: zwykle do takich rzeczy niektórzy wpisują z linii poleceń `convert a.jpeg -resize 64 b.jpeg` :-)

    Jeśli chodzi o proporcjonalne zmienianie, to być może jest to nowość w edytorach ajaksowych, ale w innych (Inkscape?) to to normalna rzecz. Zwykle wystarczy wcisnąć jakiś Ctrl i przeciągać ─ wtedy zmiana będzie proporcjonalna. Tutaj, zmiany proporcjonalne bez żadnego dodatkowego klawisza są dla mnie irytujące.

    Szata graficzna jest ok, nie przeładowana i estetyczna.

  10. Riddle 10 26 lipca 2006, 20:55

    No właśnie, prosiłbym Was o proponowanie nowych opcji, niekoniecznie jakichś filtrów, ale zwyczajnych i użytecznych… jak ten z Ctrl dla relatywnego zmieniania wielkości obrazka. :)

  11. Paweł 'SiD' Majczyk 11 26 lipca 2006, 21:34

    Lewy górny róg w którym można umieścić obrazek powinien być miejscem, które ma jakieś punkty wspólne z gridem.
    Ponadto brak suwaków w fx1.0.8 (tak wiem nie ta wersja) uniemożliwia mi (szczególnie przy wycinaniu) sięgnięcia dowolnego prawego punktu obrazka. Tym samym jeżeli mam np. duże zdjęcie z jakimś elementem na środku np. twarz, to bez skalowania całego obrazka w dół nie wytnę tego co mnie interesuje bez utraty jakości przy zmuszonej przez jego ponowne powiększanie (pod Operą dobrze jest), wiem, że fx1.0.8 nie mieści się w targecie, ale chyba nie byłby to big deal :) Pod konquerorem działa naprawde przyzwoicie, jedynie nie odświeża ekranu przy przesuwaniu/skalowaniu obrazka.

    Kolory winny być jakoś modyfikowalne (generowanie css dla użytkownika poprzec ciastka np.) Niektórzy naprawde wolą ciemne tło, a zmiana kolorów środowiska to jedna z podstawowych rzeczy (jak i również w przyszłości gdy zechcecie np. wprowadzić prowadnice a ich kolor będzie zlewał się z obrazkiem)

    Najbardziej boli mnie jednak brak wprowadzania wartości numerycznych. Doprawdy skalowanie na oko to nie jest to czego mógłbym oczekiwać od jakiegokolwiek edytora. Oczywiście wyświetla mi wymiary aktualne, ale mnie interesuje jak ustawić daną wielkość, a nie jaka jest aktualna. Potrzebuje 128px szerokości i tyle chce mieć i to za pierwszym razem, tymbardziej, że javascript muli.

    Jeżeli to narzędzie ma komukolwiek być przydatne, to trzeba go niestety wyposażyć w coś więcej niż podstawowy resize i crop, bo to już w paint można zrobić, a trudne to nie jest. Dla ludzi redukcja czerwonych oczu to naprawde potrzeba, bo ZU nie sięgnie do photoshopa by to zrobić, a oprogramowanie do aparatu jest in inglisz, wówczas byliby zainteresowani. Wycinanie/wlejanie i jakieś podstawy kolażu też mogą się przydać. Ot aby chociaż ktoś mógł wstawić pod zdjęciem jakiś zabawny napis.
    Ważna może okazać się integracja z innymi serwisami. Wręcz widze tu pole do popisu dla czegoś w stylu winogrono.net(?), aby opublikować to, co zostało spłodzone.

    Co bym chciał widzieć jeszcze? Jakieś opcje optymalizacji przy zapisie. Naprawde jeżeli mam zapisywać w gif cokolwiek, to jakaś posteryzacja byłaby wskazana. PNG też w takiej postaci nie ma większego sensu, chociaż pozostawiłbym go w celach promocyjnych :P (tylko czy słaby wynik zachęci kogoś do używania go?)

  12. delphiak 12 26 lipca 2006, 21:36

    hm.. no niby fajnie sie prezentuje.. ale ja mam jedno zasadnicze pytanie... po cholere to komu? skoro pierwszy lepszy darmowy IrfanView moze tyle samo, a nawet WIELE, WIELE wiecej...
    po co nasile robic aplikacje www skoro do takich rzeczy sto razy bardziej nadaje sie taki maly programik jak IrfanView... jak dla mnie to to troche paranoja..
    ale polityka niektorych firm jest conajmniej dziwna

  13. Riddle 13 26 lipca 2006, 21:43

    Paweł 'SiD' Majczyk: Dzięki za tak długi komentarz i wnikliwą ocenę, przyda się na pewno. :-)

  14. kiero 14 26 lipca 2006, 21:48

    Ja znalazłem podobny błąd co KKKas, z tym, że okienko "Panel info" daje się schować, a "Historia zmian" już nie dokońca. Oto dowód:

    http://img464.imageshack.us/img464/6352/fotoeditorkj8.jpg

  15. neo 15 26 lipca 2006, 22:14

    Zastanawia mnie konieczność, a raczej niekonieczność każdorazowego przeładowania zdjęcia po jego zmniejszeniu. Jego jakość nie ulega widocznej zmianie, a jednak przeładowanie znacznie spowalnia pracę. Taka operacja jest niezbędna tam, gdzie js sobie nie poradzi - obrót obrazka, jego "przebarwienie", itp.
    Druga sprawa to dość wolne działanie podczas przesuwania obrazka / skalowania. Sam zajmowałem się "ruchomymi" warstwami z możliwością zmiany rozmiaru, a całość działała dość dobrze. (neo.mlodzi.pl/archiwum/ruszanie_elementami_strony_na_zywo) Jako przykład można wstawić obrazek (zwyczajnie - img) o klasie r. Tak, wiem, nie ma kwadracików, za które można "chwycić"...
    I jeszcze jedno. Czy projekt jest zamknięty, a uczestniczenie w jego tworzeniu sprowadza się tylko do wykrywania bugów?

  16. soomal 16 26 lipca 2006, 23:25

    Przydatne toto, żeby szybko coś wykadrować, fajnie zrobione kadrowanie.
    Ciekawą opcją byłoby jakieś ułatwienie przy skalowaniu, żeby można było trawić w równe liczby (parzyste).

  17. soomal 17 26 lipca 2006, 23:29

    loku: z pliczku prototype.js:

    /* Prototype JavaScript framework, version 1.5.0_rc0
    * (c) 2005 Sam Stephenson <sam@conio.net>
    *
    * Prototype is freely distributable under the terms of an MIT-style license.
    * For details, see the Prototype web site: http://prototype.conio.net/
    *
    /*--------------------------------------------------------------------------*/

  18. Piotr Konieczny 18 26 lipca 2006, 23:52

    Fajnie, ale czy zamierzacie dodać coś, co wyróżni fotoeditor (BTW: chyba fotoed*y*tor, albo *ph*otoeditor ;p) od tych?

    http://pxn8.com/
    http://edit.snipshot.com/

  19. Riddle 19 26 lipca 2006, 23:53

    Domena taka była dostępna po prostu. Na razie zależy nam na testach i bugreportach - stąd ten formularz komentarzy na stronie.

  20. mls 20 27 lipca 2006, 02:42

    Pod Safari działa nie dość, że koszmarnie wolno, to jeszcze albo ja czegoś nie wiem, albo przycinanie nie działa :]
    Poza tym coś takiego już gdzieś widziałem...

  21. mcv 21 27 lipca 2006, 06:52

    Co do przesuwania i braku suwaków, o którym wspomniał Paweł, można by (prócz suwaków ;-)) dodać przesuwanie obrazka środkowym wciśniętym przyciskiem myszy.

    Może przydały by się jakieś opcje „skaluj do { 64x64px, 80x80px, … }”, coby szybko przeskalować obrazek do jakiegoś mniej lub bardziej standardowego rozmiaru avatarów?

  22. corn 22 27 lipca 2006, 08:57

    Taki dziwny błąd zauważyłem. Po wycięciu kawałka z całego obrazka i obróceniu go lewym guzikiem jego zawartość ulega zmianie.

  23. muniek 23 27 lipca 2006, 09:15

    "Patrząc na dzisiejszy Internet mogę powiedzieć, że przewaga Flasha w interaktywnych stronach będzie na pewno maleć." Moim skromnym zdaniem akurat w tym zakresie (edytory grafiki online) przewaga flasha jest ogromna. Jak ktoś chce to sobie moze zrobić pseudo-Photoshopa online (wydajność pomijam).

  24. matt 24 27 lipca 2006, 10:43

    Czy w firmie przewidujecie udostepnienie tej pracy ogolowi spoleczenstwa na ktorejś z licencji? ;-)

    Czy to bedzie tylko serwis online?

  25. Riddle 25 27 lipca 2006, 11:20

    corn: Powinno już działać, jeśli możesz napisz czy dalej doświadczasz problemów z obracaniem. :-)

  26. anonim 26 27 lipca 2006, 11:34

    coś to dziwnie traktuje png z przeźroczystościa

  27. delphiak 27 27 lipca 2006, 12:27

    a czy ja sie dowiem jaki jest wasz cel tej aplikacji czy dalej bedziesz ktos unikal odpowiedzi na to ?

  28. Ktos 28 27 lipca 2006, 20:23

    U mnie pod Internet Explorerem 6 i Internet Explorerem 7 (beta 2) nie działa. Naciskam "Załaduj plik" i nic, odświeżenie strony ponowne.

    Jutro, jak będę miał czystą sytuację to spróbuję znaleźć błąd i coś skrobnąć. Ale to może być wina moich IE, a nie aplikacji ;-)

  29. Riddle 29 27 lipca 2006, 20:32

    Ktoś: Masz rację, po dzisiejszych poprawkach wycinania i historii w IE się trochę skopsało.
    (edit) A jednak działa… tylko trochę długo ładuje ten plik…

    delphiak: Naszym celem nie jest zrobienie Photoshopa Online, tylko stworzenie prostego edytora zdjęć z podstawowymi funkcjami. Zobacz podlinkowaną wyżej Picasę i jej funkcje edycyjne.

    Można oczywiście się zapytać „po co” po raz drugi, ale również „po co Writely”, „po co Google Page Creator”… jak nie widzisz w którą stronę sieć zmierza, to sory bardzo.

  30. delphiak 30 28 lipca 2006, 00:02

    no ja niestety nie widze po co Writetly ,a juz o WebOs'ach to nie wspomne... rzeczy tego typu moze bylyby dobre gdyby ludzie mieli lacza po 100mbit.. ale to nastapi za parenascie lat...
    no i niestety prawdziwych aplikacji nie widze narazie przy uzyciu tak prymitywnych technik sprzed kilku lat jak ajax...

    siec jeszcze musi moim zdaniem ewoluowac zanim tego typu przedsiewziecia beda mialy sens.

    bo narazie nie znam nikogo kto mialby korzystac z rzeczy jak chocby wspomniany Writely...

  31. delphiak 31 28 lipca 2006, 00:04

    i zeby jeszcze nie bylo ze jestem calkiem na nie... ajax owszem jest dobry, ale jako dodatek do stron, tworzenie ich bardziej uzytecznymi.. bo do tworzenia aplikacji on sie nie nadaje.. chocby dlatego ze jest to technologia na ktorej nie mozna polegac, bo zbyt wiele zalezy od konfiguracji komputera uzytkownika

  32. satorian 32 28 lipca 2006, 07:07

    no właśnie cały pomysł na aplikacje webowe polega na tym, że by nic nie zależało od konkretnej konfiguracji :)

  33. corn 33 28 lipca 2006, 09:30

    Obracanie działa już u mnie poprawnie :)

  34. Radarek 34 28 lipca 2006, 16:46

    "chocby dlatego ze jest to technologia na ktorej nie mozna polegac, bo zbyt wiele zalezy od konfiguracji komputera uzytkownika"

    Delphiak czy mógłbyś sprecyzować swoją wypowiedź? Tylko proszę Cię nie mów, że javascript musi być włączony...

  35. delphiak 35 28 lipca 2006, 19:48

    chodzi o to, ze w tej chwili nie wszystkie przegladarki tak samo interpretuja JS, przykladem jest chocby to, ze napisanie aplikacji dzialajacej pod Firefoxem wcale nie oznacza ze bedzie ona poprawnie dzialac w Operze, IE, czy Safari...
    niejednokrotnie trzeba nadrabiac kodu zeby wszystko dzialalo wszedzie poprawnie, a przy bardziej skomplikowanych aplikacjach jest to juz czesto bardzo trudne do wykonania.

    a kolejnym powaznym zarzutem dla Ajaxu jest taki aspekt jak jego szybkosc... no to po prostu niewykonalne zeby taka aplikacja byla choc zbilzona szybkoscia pracy do jakiekolwiek programu w formie binarnej.

    takze aplikacje tak tworzone jak dla mnie jeszcze przez dlugi czas beda tylko ciekawostka, a nie czyms czego bym uzywal. mam na mysli takie rzeczy jak wlasnie fotoeditor, writely, webos'y czy nawet kiedys spotkalem sie z 'aplikacja' do tworzenia prezentacji (taki mini powerpoint)

    dla mnie ajax jest uzyteczny tylko w takiej formie jak na gmailu czy diggu i wlasnie w tym kierunku to powinno isc, a cala reszta to zwykle zachlysniecie sie "nowoscia" przez programistow.

    a jesli chcemy tworzyc prawdziwe aplikacje www, to potrzeba czegos wiecej niz technologi z przed paru lat no i czasu, zeby szybki internet stal sie bardziej popularny i przedewszystkim jeszcze szybszy ;)

    to tylko moja opinia i jak wiemy mozna sie z nia niezgadzac

  36. Ktos 36 28 lipca 2006, 19:54

    Heh, dzisiaj właśnie w nowym PC World Komputer czytam, że "koniec aplikacji jakie znamy" i że Ajax jest cudowny ;-)

    Dodam jeszcze, że są problemy z XMLHttpRequest w niektórych przeglądarkach (Opera...), poza tym pozostaje ten aspekt, że wysyłamy nasze dane gdzieś na jakieś serwery jakiś korporacji, które niekoniecznie muszą mieć pięknie opracowaną politykę prywatności...

    Tak mały OT: Jakie zachłyśnięcie nowością? Toż XMLHttpRequest to już prehistoria (bodajże od IE 4), a i JS/DOM i XML nowe nie są.

  37. delphiak 37 28 lipca 2006, 21:26

    a czy kolega Ktos nie zauwazyl cudzyslowow? ktore dobitnie ukazuja ze to co pisze to ironia...

  38. Ktos 38 29 lipca 2006, 10:09

    delphiak: Szczerze mówiąc to chyba nie zauważyłem :-)

  39. delphiak 39 29 lipca 2006, 17:16

    zdarza sie ;) ale taka prawda, ze teraz kazdy chce wstawic na strony jak najwiecej tego 'Ajaxa' i nie zastanawia sie nawet czy to ma sens ;) czesto mi sie nawet to zdarza, ale na szczescie po czasie czesto dostaje kubel wody na glowe i trzezwieje :]

  40. harad 40 30 lipca 2006, 00:03

    czemu "fotoeditor"? jakiś zlepek polsko-angielskich słów, albo fotoedytor albo photoeditor, natomiast fotoeditor jakoś dziwacznie brzmi :P

  41. endryou 41 02 sierpnia 2006, 00:17

    To ja może dorzucę adres strony z porównaniem innych narzędzi tego typu:
    http://www.smileycat.com/miaow/archives/000267.html

  42. Riddle 42 14 sierpnia 2006, 07:49

    harad: Już napisałem, taka domena była dostępna. :-)

  43. Nero 43 26 sierpnia 2006, 12:09

    Woooooooow z kazdym takim czyms uswiadamiam sobie ile czeka mnie jeszcze nauki JS-a... potem PHP&Mysql i dopiero wtedy dojde do Ajaxa... ale majac 15 lat to mam na szczescie duzo czasu :D

  44. Kasia 44 28 sierpnia 2007, 15:33

    Zdjęcia nie chcą sie ładować,wiele razy używałam tej stronki i wszystko super a teraz od paru dni za każdym razem jak wchodze ,wybieram zdjęcie,długo czekam a tu nic….odświeża się strona i to wszystko.

  45. Wojtek 45 08 grudnia 2007, 19:15

    Podczas „wycinania” zdjęcia mogłaby być opcja podania wymiarów nowego foto z klawiatury (pop prawicy tam gdzie są aktualne wymiary), i dopiero później nowe okienko by się przesuwało tak jak chcemy foto wyciąć. Zlikwidowało by to problem z celowaniem w wymiar jeślibyśmy chcieli otrzymać zdjęcie o konkretnych wymiarach z dokładnością co do px….. chociaż i tak działało mi to zadziwiająco precyzyjnie ;)

    Pozdrawiam

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.