Crop e caricare immagine utilizzando jQuery/Java

Question

Cerco un plugin jQuery che permette la seguente:

1. Seleziona/Sfoglia un'immagine (dal file system dell'utente)
2. in anteprima l'immagine, con la possibilità di CROP
3. Carica l'immagine ritagliata al server (Java Servlet)

Tutti gli indicatori per questo?

P.S. : Ho trovato numerosi plug-in di ritaglio di immagini standalone (che funzionano su immagini predefinite), ma non quelli che consentono il caricamento di un'immagine personalizzata (su servlet Java).

Answer 1

Un modo per ritagliare l'immagine prima di caricarlo sul server nei browser supportati HTML5 è spiegato here. La soluzione menzionata è la combinazione di: JCrop, JQuery, le API File e Canvas di HTML5.

L'altro modo di andare (per i browser non HTML5) è:

1. immagine Select/browse
2. caricarlo sul server (immagine temporaneo)
3. in anteprima l'immagine, con la possibilità di CROP
4. Invia CROP coordinate al server
5. Crop e salvare l'immagine sul lato server

Answer 2

In breve, avresti bisogno di seguire.

forma

Usa HTML "multipart" per pubblicare un'immagine per servlet

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

In servlet scrivere questo file in una cartella "pubblico" in modo che sia accessibile al browser. È possibile utilizzare http://commons.apache.org/fileupload/ per questo scopo nel caso si utilizzino servlet. Nel caso in cui si utilizzi framework di app Web, il framework potrebbe offrire un modo per caricare dati binari.

Pagina di ritorno con link/riferimento all'immagine caricata. Si consiglia di utilizzare una sorta di algoritmo di generazione di nomi di file casuali per evitare la collisione di riferimento dei file.

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

Utilizzare JCrop http://deepliquid.com/content/Jcrop.html per ottenere le coordinate di ritaglio. La documentazione di JCrop è molto dettagliata su come usarla. Si noti che è necessario inizializzare JCrop per eseguire il binding con il riferimento dell'immagine sopra.

Scrivi un altro servlet al quale puoi POSTARE/OTTENERE le coordinate ritagliate e fare quello che vuoi con esso.