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.

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

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.

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

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

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

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.


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.

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

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.

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...


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?


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


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

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.