Crop i przesłać obraz przy użyciu jQuery/JAVA

Question

szukam plugin jQuery, który umożliwia następujące:

1. Wybierz/Przeglądaj obraz (z systemu plików użytkownika)
2. podgląd obrazu, z możliwością CROP
3. Prześlij przyciętego obrazu do serwera (Java Servlet)

Wszelkie wskazówki na to?

P.S. : Znalazłem wiele samodzielnych wtyczek do przycinania obrazu (które działają na wcześniej zdefiniowanych obrazach), ale nie te, które umożliwiają przesyłanie niestandardowego obrazu (również za pośrednictwem serwletów Java).

Answer 1

Jednym ze sposobów przycięcia obrazu przed jego przesłaniem na serwer w przeglądarkach obsługujących HTML5 jest wyjaśnienie here. Wspomnianym rozwiązaniem jest połączenie: JCrop, JQuery, API plików i Canvas HTML5.

Druga droga (dla przeglądarek innych niż HTML5) to:

1. Wybierz/Przeglądaj obraz
2. przesłać go do serwera (jako tymczasowego obrazu)
3. podgląd obrazu, z możliwością przyciąć
4. Wysłać CROP współrzędne na serwer
5. wyciąć i zapisać obraz na stronie serwera

Answer 2

Krótko mówiąc, musisz wykonać następujące czynności.

„wieloczęściowy” forma

Korzystanie HTML aby umieścić obraz na serwletu

<form name="frm" enctype="multipart/form-data" action="/saveimage" method="POST"> 
    <input type="file" name="filetoupload" />  
    <input type="submit" value="Upload" /> 
</form> 

W serwletu napisać ten plik do folderu „publiczne”, dzięki czemu jest ona dostępna do przeglądarki. Do tego celu możesz użyć http://commons.apache.org/fileupload/, jeśli używasz Serwletów. W przypadku korzystania ze środowiska aplikacji internetowych struktura może zaoferować sposób przesyłania danych binarnych.

Powrót strona z linkiem/odnośnikiem do przesłanego obrazu. Możesz użyć jakiegoś algorytmu generowania losowych nazw plików, aby uniknąć kolizji odniesień do pliku.

<img src="/public/random-image.jpg"/> 

Użyj współrzędnych obiektu http://deepliquid.com/content/Jcrop.html, aby uzyskać współrzędne przycięcia. Dokumentacja JCrop jest bardzo gadatliwa na temat tego, jak jej używać. Zauważ, że będziesz musiał zainicjować JCrop w celu powiązania z odnośnikiem do obrazu powyżej.

Napisz kolejny aplet, do którego możesz POST/GET przycięte współrzędne i robić, co chcesz z nim.