Seleccionar y grabar area de una foto

[iruindegi]

Buenas,

Para una aplicación que tengo que desarrollar, necesito cargar una imagen desde un form (no hay problemas con esto) y una vez cargada, necesito especificar tres areas de la foto y guardar esas tres areas .

luego en otra página necesito cargar esa imagen y superponer las areas seleccionadas con en berde o algo asi.

Sabes decirme como puedo hacer esto? Es algo similar el etiquetado de fotos en facebook.

Gracias de antemano

[marlanga]

Pinta la foto en el background (CSS) de un DIV. Haz que el DIV tenga el mismo ancho y alto que la imagen. Controla los eventos de raton mouseup y mousedown sobre dicho DIV.

Cuando hagas un mousedown en el DIV guarda las coordenadas X1 e Y1 del ratón. Cuando hagas el mouseup igual (X2,Y2).
Así tendrás almacenados dos vértices opuestos del rectángulo que formas (como en los juegos de estrategia tipo age of empires 2) cuando pinchas con el ratón en un sitio, arrastras y sueltas el botón. Pero esta vez, seleccionarás "en vivo" sobre la imagen, un trozo.

Crea un bucle que haga esto 3 veces, así tendrás tus 3 rectángulos (cada rectángulo definido por 2 coordenadas: (X1,Y1) y (X2,Y2)

Manda esos datos a un PHP. Con la librería GD de PHP, es muy fácil pintar "trozos" de imagen a partir de una coordenada y un ancho y un alto. El vértice superior izquierdo para GD en PHP es el 0,0 (que por otro lado, es IGUAL que la referencia para javascript de las coordenadas del ratón)..

Queda una problemática: ¿Qué pasa si al pinchar y arrastrar me salgo del DIV?
Manera fácil: El último rectángulo queda incompleto. El mouseout resetea la estructura de datos como tenga que hacerlo y vuelve a pedir el último rectangulo.
Manera difícil: Añades otro evento de ratón sobre el DIV, onmousemove, y vas guardando cada vez que el ratón se mueva, las coordenadas X,Y de donde estaba. Cuando se dispare el evento mouseOut, simplemente le dices a tu algoritmo que el X2,Y2 es el X,Y que tomaste en el último onmousemove.

[iruindegi]

Ey! Gracias por tu respuesta, ha sido muy inspirador!
Encima he encontrado esto, que puede que tambien me sirva:

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/all-comments/#comments

haber si con las dos cosas, consigo hacerlo que quiero.

Gracias por tu ayuda!!

[harryp]

Bueno también puedes mirar la librería jcrop de jquery... luego con un canvas montas tu imagen