Seleccionar y grabar area de una foto

[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.