[HTML][JavaScript][PHP]Tworzenie obrazka Opcje

[lukaszgolder]

Czy da się w jakiś sposób stworzyć obrazek z kodu html. Mam edytor do tworzenia planu z góry. Po zakończonej pracy chciałbym zapisać stworzony plan jako obrazek. Jest to możliwe?

[Kamil Pietrzak]

szukaj biblioteki do obrazkow w php

[Kshyhoo]

To też zależy, jaki format mają dane.

[lukaszgolder]

Nie chodzi mi o stworzenie obrazka w php, bo nie ma on takich możliwości. Format danych to powiedzmy:

[HTML] pobierz, plaintext 
<div class="pokoj">
 <img sec="szafa.gif">
</div>
[HTML] pobierz, plaintext 

[starach]

A co rozumiesz poprzez stworzenie obrazka z kodu? Może SVG?

[Kshyhoo]

No tak, ale szafa.gif to jest obrazek, wiec w czym problem?

[lukaszgolder]

Chodzi mi mniej więcej o coś takiego:

Ułożyłem sobie pokój za pomocą edytora, mam podłogę, meble, ściany, a w kodzie są to divy, obrazki (img). Chciałbym teraz ten cały kod zapisać w postaci jednego obrazka o rozszerzeni .gif .jpg .png obojętnie. Taki jakby screen.

[Kshyhoo]

Magiczne hasło - html2jpg... Bez php to jedynie w js.

[lukaszgolder]

No własnie czegoś takiego szukam. Może być w PHP. Jakaś podpowiedź jak stworzyć taki skrypt?

[Kamil Pietrzak]

szukaj biblioteki do obrazkow w php

[Kshyhoo]

A ja podałem Ci magiczne słowo, otwierające tajemne zasoby Google ;p

[lukaszgolder]

Ale czy w ogóle zrozumieliście co ja chcę osiągnąć? W google pod twoim "magicznym" słowem znajduję w większości programy do robienia zrzutów stron www, a mi potrzeba stworzyć funkcję którą po podaniu jej kodu html stworzy mi obrazek.

#Kamil Pietrzak
Uwierz mi że wiem co to biblioteka obrazków w php i póki co nie znalazłem / nie przypominam sobie żeby miała ona możliwość stworzenia obrazka z divów i kodu html.

[Kamil Pietrzak]

musisz napisac posrednik
dane ustalone jsem i wyslane do php(albo jakos podobnie) - > posrednik -> biblioteka

Ten post edytował Kamil Pietrzak 6.02.2010, 14:04:35

[lukaszgolder]

No z wysyłaniem danych JSem, biblioteką sobie poradzę, ale interesuję mnie właśnie ten "pośrednik". W ogóle co masz na myśli?

[Kamil Pietrzak]

jakis konwerter... danych ze strony na polecenia do biblioteki
konwerter dostanei dane na temat elementow, pozniej bedzie po kolei bazujac na tym robil obrazek
to wydaje mi sie w miare mozliwe, ale na pewno nie bedzie to robota na 5 minut
samo przekazanie danych ze strony do skryptu wydaje sie nielatwe, choc to tez zalezy od tego edytora na stronie i od tego co chcesz nim zrobic

w kazdym razie
powodzenia

[lukaszgolder]

Z przekazywaniem danych nie będzie żadnego problemu. No a co do tego konwertera, to wydaje się w miarę logiczne, no ale nadal nie wiem jak stworzyć obrazek z elementu htmla: DIV. To jest kluczowy problem z resztą sobie poradzę.

[Kamil Pietrzak]

jam am na mysli przekazanie np. szerokosci, wysokosci, odleglosci od lewej, od gory, i innych parametrow do php
pozniej z tego co widzialem to, ta biblioteka mozna nietrudno zrobic np. prostokat o x i y wymiarach i o x i y polozeniu i tak po kolei z kazdym elementem
tylko moj kontakt z ta biblioteka konczy sie na ogladaniu kodu w ktorym byla uzywana, nie pracowalem na niej, wiec Ci nie pomoge z dokumentacja

[Kshyhoo]

A nie możesz odwrócić sposobu wykonania? Po prostu generuj od razu obrazek...

[lukaszgolder]

Nie mogę odwrócić, bo zanim użytkownik sobie to zapisze, może sobie dodawać pomieszczenia, dodawać im tło, dodawać ikonki, obracać, przesuwać itd.

No z tym przekazywaniem parametrów to jest chyba do zrobienia, ale jak sobie poradzić z wartością top i left, odnosi się ona do położenia względem okna przeglądarki i o ile od góry będzie zawsze tak samo to od lewej już będzie różnie.

[Kshyhoo]

Możesz przekazywać te dane np w sesji, a na koniec zapisać, jako obrazek. Możesz też zapisywać tymczasowo w bazie i potem sklejać. Robiłem kiedyś coś na podobnej zasadzie do gry Polanie Online - komponowanie herbu. Wszystko zależy, jakie masz dane wyjściowe, jak wygląda kod. Bez jego znajomości możemy jedynie proponować rozwiązania, nie konkrety.

Ten post edytował Kshyhoo 7.02.2010, 11:07:36

[lukaszgolder]

Przykładowy, niezbyt skomplikowany kod (normalnie będzie tego dużo dużo więcej):

[HTML] pobierz, plaintext 
<div class="pomieszczenie" id="1265541055921" style="position: absolute; width: 503px; height: 250px; left: 115px; top: 361px; background-image: url(http://localhost/aaa/img/floors/parkiet.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; "></div><div class="pomieszczenie" id="1265541061466" style="position: absolute; width: 112px; height: 60px; background-image: url(http://localhost/aaa/img/floors/piasek.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; -webkit-transform: rotate(180deg); left: 493px; top: 613px; background-position: initial initial; background-repeat: initial initial; "></div><img src="/aaa/img/icons/bilard.gif" id="1265541080002" alt="bilard" class=" " style="left: 183px; top: 377px; "><img src="/aaa/img/icons/bar.gif" id="1265541089241" alt="bar" class=" " style="left: 468px; top: 401px; "><img src="/aaa/img/icons/automat.gif" id="1265541091218" alt="automat" class=" " style="left: 338px; top: 580px; "><img src="/aaa/img/icons/rzutki.gif" id="1265541094906" alt="rzutki" class=" " style="left: 239px; top: 596px; "><img src="/aaa/img/icons/stolik_dlugi.gif" id="1265541098666" alt="stolik_dlugi" class="ui-selected" style="-webkit-transform: rotate(45deg); left: 307px; top: 451px; "><img src="/aaa/img/icons/stolik_podluzny.gif" id="1265541110449" alt="stolik_podluzny" class=" " style="left: 178px; top: 484px; "><img src="/aaa/img/icons/automat.gif" id="1265541113250" alt="automat" class=" " style="left: 512px; top: 555px; "><img src="/aaa/img/icons/bilard.gif" id="1265541115834" alt="bilard" class=" " style="left: 404px; top: 410px; "><img src="/aaa/img/icons/pilkarzyki.gif" id="1265541118253" alt="pilkarzyki" class=" " style="left: 429px; top: 531px; ">
[HTML] pobierz, plaintext 

Ten post edytował lukaszgolder 7.02.2010, 12:16:18

[Kshyhoo]

Tak sobie myślę, a po co wogóle zapisywać to jako obrazek, jeżeli można zapisać tylko położenie poszczególnych DIVów i ładować to, przy wyświetlaniu pokoju. Daje to dodatkową możliwość późniejszej edycji.

[lukaszgolder]

Wiem że tak można, tak póki co mam to zrobione, ale jeśli jest możliwość zapisania tego jako obrazek byłoby dużo lepiej, no a edycja raczej jest niepotrzebna.

No i jeszcze co do divów co zrobić żeby miały one poprawne położenie na każdej rozdzielczości?

Ten post edytował lukaszgolder 7.02.2010, 12:52:32

[Kshyhoo]

Zapisywać położenie do głównego DIVa a nie go strony.
Co do obrazka, z DIVami pewnie byłby problem, ale nie z grafiką. Możesz przecież wygenerować obraz o parametrach głównego DIVa i uważać go za pokój. Potem nakładać na niego grafiki w odpowiednie miejsca. Parametry już masz, wystarczy je wykorzystać.

Ten post edytował Kshyhoo 7.02.2010, 13:09:24

[Kamil Pietrzak]

Nie mogę odwrócić, bo zanim użytkownik sobie to zapisze, może sobie dodawać pomieszczenia, dodawać im tło, dodawać ikonki, obracać, przesuwać itd.

No z tym przekazywaniem parametrów to jest chyba do zrobienia, ale jak sobie poradzić z wartością top i left, odnosi się ona do położenia względem okna przeglądarki i o ile od góry będzie zawsze tak samo to od lewej już będzie różnie.

mozesz mierzyc rozmiar okna przegladarki
poza tym left i top w ccs na posiition relative masz od bloku w ktorym sie znajduje a nie od okna
ja bym sie martwil o przekazania tak duzej liczby zawrtosco ktore raz moga istniec, a innym razem nie
w koncu uzytkownik moze raz zrobic 1 element, a raz 100 i trzeba to jakos ogarnac
ale jest do zrobienia...