Customizer produktu Opcje

[markonix]

Czy ktoś ma jakieś doświadczenia z kreatorami produktów?

Chodzi mi o najprostszą opcję np. mamy obiekt i zmieniamy kolor/materiał danego elementu.
Przykład:
http://www.stokke.com/highchairs/tripp-tra...ripp-trapp.aspx

Jedno rozwiązanie zrobiłem na zasadzie wgrywania wszystkich kombinacji ręcznie - takie rozwiązanie ma jednak główną wadę - czasochłonność, a przy naprawdę dużej liczbie kolorów to praktycznie staje się nie możliwe aby utworzyć taką galerie.

Na razie co mi przyszło do głowy to zamiast kompletnych kombinacji zmieniać wyłącznie dany element np. mamy samochód i zmieniam felgę - w plikach mam po prostu wszystkie felgi - podmieniam zdjęcie i mam efekt.
Ostatecznie jednak jest to po prostu zlepka kilku <img>, co wygląda troszkę infantylnie i niestety nie ma zbytnio opcji eksportu takiego zdjęcia.

Jakieś ciekawsze rozwiązania? jQuery, canvas (poza flashem)? Zastanawiam się jak jest to rozwiązane w przykładzie powyżej bo efekt jest dość fajny, wygląda na rozwiązanie server side.

Ten post edytował markonix 2.02.2014, 14:46:44

[owca_82]

W przykładzie to zwykła "sklejka" kilku zdjęć i podmianka jednego z nich przy pomocy Ajaxa - nic szczególnego



Ten post edytował owca_82 2.02.2014, 19:18:36

[markonix]

No ale jest to raczej sklejka typu serverside skoro można np. utworzyć taki link:
http://www.stokke.com/~/media/E62233F93CB1...ED9.ashx?mw=335
(do konkretnej wizualizacji), nie mówiąc o fajnym przejściu.

[IceManSpy]

Zabawa z opacity? 2 nałożone zdjęcia, zmiana opacity i powinno hulać.

[memory]

http://sandbox.nikorablin.com/productColorizer/

[PrinceOfPersia]

biblioteka Fabric.js (działająca na Canvasie): http://fabricjs.com/image-filters/
wrzucasz obrazki, nakładasz filtry...

[markonix]

Zabawa z opacity? 2 nałożone zdjęcia, zmiana opacity i powinno hulać.

Animacja to tak tylko dodałem, to akurat najmniejszy problem bo to tylko kwestia prezentacji.
Ale masz racje, to po prostu przejście między poprzednim wygenerowanym obrazem a nowym.

http://sandbox.nikorablin.com/productColorizer/

Dobry trop jednak to rozwiązanie jest typowo klienckie - w tym przykładzie co podałem na takowe mi nie wygląda.
Minusem jest też że to raczej to kolorowania całego produktu, max 2 części oraz że raczej nie obsłuży gradientu.

edit:
Wydaje mi się jednak, że to nie jest rozwiązanie serwerowe tylko dobra robota grafika (mówię ciągle o tym samym przykładzie).
Oglądając zdjęcia widać troszkę cyfrowej obróbki, a w przypadku zmiany koszyka ten jest po prostu nakładany jak zwykły img.

Ten post edytował markonix 3.02.2014, 00:03:38

[PrinceOfPersia]

Dobry trop jednak to rozwiązanie jest typowo klienckie - w tym przykładzie co podałem na takowe mi nie wygląda.

klienckie, więc lepsze, bo serwer nie musi generować grafiki za każdym razem, tylko robi to przeglądarka.

[markonix]

Tak, ale gdy to jest serwer to otrzymuje fajną, pojedynczą grafikę, nie muszę się martwić o kwestie klienckie, u wszystkich wygląda i działa tak samo.
Poza tym taką grafikę mogę zapisać na przyszłość i tym samym popularne kombinacje już mieć gotowe.

Generowaną grafikę canvasem chyba też można zapisać, ale to już chyba trudniejsze.

Na razie jestem w kropce ale skłaniam się ku nauce canvasa, porobić fragmenty obiektu w każdym kolorze i materiale i łączyć to jak puzzle.

[PrinceOfPersia]

Tak, ale gdy to jest serwer to otrzymuje fajną, pojedynczą grafikę, nie muszę się martwić o kwestie klienckie, u wszystkich wygląda i działa tak samo.

Canvas też raczej będzie wyglądał i działał tak samo. Zresztą nawet w przypadku grafik typu JPG czy PNG nigdy nie masz pewności, czy bedą się wyświetlać tak samo na różnych przeglądarkach (chociażby znany błąd starszych wersji IE z przezroczystością, który trzeba omijać hackiem) . Tylko nie ma co się martwić na zapas...

Poza tym taką grafikę mogę zapisać na przyszłość i tym samym popularne kombinacje już mieć gotowe.

tylko po co mieć gotowe, skoro wygenerowanie kolejnej kombinacji w przeglądarce to ułamek sekundy, a pociągnięcie jej z serwera może potrwać kilka sekund?

Generowaną grafikę canvasem chyba też można zapisać, ale to już chyba trudniejsze.

Jest do tego funkcja toDataURL, tu masz przykład: http://tutorials.jenkov.com/html5-canvas/todataurl.html

Na razie jestem w kropce ale skłaniam się ku nauce canvasa, porobić fragmenty obiektu w każdym kolorze i materiale i łączyć to jak puzzle.

No w tej bibliotece - fabric - masz gotowe filtry do kolorów (patrz link, który wrzuciłem wcześniej w tym temacie)

[markonix]

Nie no bez przesady że podmiana obrazka ajaxem trwa kilka sekund
Ale nie o tym..

Tak, oczywiście oglądałem ten example.
Jest to jednak bardziej filtr i efekt nie będzie zbyt estetyczny - to raczej np. do kolorowania koszulek ny się nadało.
Np. patrząc na ten przykład co podałem - na pewno takiego efektu nie osiągnę bo np. "drewno" to nie kolor brązowy, tylko dość zaawansowany gradient.
Idąc dalej to nie wystarczy pokolorować drewnem bo w różnych miejscach te drewno wygląda inaczej.
Skłaniam się jednak ku "puzzlowej" wersji.