Czy istnieje sposób na wygenerowanie jednego obrazu z kilku obrazów przeciągniętych i upuszczonych przez użytkownika w niektórych pozycjach kontenera div?

Próbowałem to zrobić za pomocą płótna html5, jednak płótno html5 nie integruje się za pomocą jquery, aby zmienić źródło obrazów na płótnie.

0
Mohamed Said 20 czerwiec 2011, 16:50

2 odpowiedzi

Najlepsza odpowiedź

Możesz wysłać adresy URL obrazów i współrzędne do skryptu PHP, a następnie (po stronie serwera) złożyć różne obrazy w jeden za pomocą funkcje manipulacji obrazami.

EDYTUJ

Podam kilka krótkich wskazówek, w jaki sposób możesz wykonać swoje zadanie.

Otrzymasz formularz z 3 tablicami ukrytych <input>s: adresy URL obrazów, współrzędne x i współrzędne y umieszczonych obrazów. Będą one wypełniane przez jquery, gdy użytkownik upuszcza obrazy do kontenera.

Skrypt asemblera działałby w podobny sposób:

  1. Utwórz (duży) pusty obraz kontenera (za pomocą imagecreatetruecolor()), zadzwońmy to $imcont
  2. Przeczytaj kolejno wysłane adresy URL (np. $_POST['url'][$i]), otwórz odpowiedni obraz i utwórz obraz dla każdego z nich, np. imagecreatefromstring(file_get_contents($_POST['url'][$i]));

    jeśli potrzebujesz wymiarów małego obrazu, możesz użyć getimagesize() jak ten:

    list($iwidth,$iheight) = getimagesize($_POST['url'][$i]);

  3. imagecopy() obraz utworzony w pt. 2 do $imcont, przy odpowiednich współrzędnych POSTed (np. $_POST['xcoords'][$i],$_POST['ycoords'][$i])
  4. Powtórz pkt. 2 i 3 dla każdego zamieszczonego obrazu.
  5. Zapisz wygenerowany obraz $imcont, np. jeśli chcesz stworzyć obraz jpeg, użyj imagejpeg().

Uwaga

  • Aby POST tablice z formularza, użyj [] po nazwie wejściowej, np. <input name="foo[]" ... > ;
  • $i to indeks w pętli for;
  • normalnie nie wysyłasz całej ścieżki systemu plików, jak wymaga tego file_get_contents(), więc prawdopodobnie będziesz musiał dodać katalog bazowy obrazów do $_POST['url'][$i];
  • jeśli chcesz czytać obrazy z adresu URL, takiego jak http://www.site.com/image.jpg (przeciwnie do ścieżki systemu plików, takiej jak /usr/share/images/image.jpeg), będziesz potrzebować allow_url_fopen włączone w Twojej konfiguracji PHP;
  • obrazy zostaną skopiowane do kontenera w kolejności przetwarzania z, tj. pierwszy z nich zostanie wklejony pod wszystkimi innymi.
3
Paolo Stefan 21 czerwiec 2011, 12:47
Piękne wyjaśnienie, wszystko, czego potrzebowałem do stworzenia aplikacji, w której użytkownik przeciąga rzeczy do swojego zdjęcia, a następnie generuje z nim końcowy obraz.
 – 
Diego Magalhães
29 lipiec 2012, 19:19

@mohamed

Jeśli chcesz przykładowy kod, może to ci trochę pomoże http://www.bolducpress.com/ tutoriale/jak-zrobić-niestandardowe-awatary-z-php/2/

1
Kemal Fadillah 21 czerwiec 2011, 12:52
Dzięki Kemalowi, to naprawdę dobre, ale wciąż nie wiem, komu przypisać pozycje do każdego obrazu, zamiast tworzyć wszystkie obrazy w tym samym rozmiarze. Dowolny pomysł?
 – 
Mohamed Said
22 czerwiec 2011, 11:50