Código:
<style type="text/css">
#apDiv1 {
position:absolute;
width:93px;
height:65px;
z-index:2;
background-color: #996633;
left: 158px;
top: 74px;
}
#apDiv2 {
position:absolute;
width:339px;
height:176px;
z-index:1;
background-color: #99CCFF;
left: 26px;
top: 19px;
}
#resultado {
position:absolute;
width:358px;
height:195px;
z-index:0;
left: 20px;
top: 12px;
background-color: #FFFFCC;
}
#apDiv3 {
position:absolute;
width:269px;
height:67px;
z-index:3;
left: 392px;
}
</style>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="resultado"></div>
<div id="apDiv3"><table width="200" border="1">
<tr>
<td><form name="form1" method="post" action="">
Superior
</form></td>
<td><input type="text" name="textfield" id="textfield"></td>
</tr>
<tr>
<td>inferior</td>
<td><input type="text" name="textfield2" id="textfield2"></td>
</tr>
<tr>
<td>Izquierda</td>
<td><input type="text" name="textfield3" id="textfield3"></td>
</tr>
<tr>
<td>Derecha</td>
<td><input type="text" name="textfield4" id="textfield4"></td>
</tr>
</table>
</div>
Explico un poco el código
El recuadro amarillo es el espacio donde se mostrará el resultado.
Los dos recuadros (marrón y azul) representan las dos imágenes.
En la parte derecha hay 4 cajas de texto donde el usuario pone unos valores numéricos y lo que hace es enviar por ajax estos valores a un fichero php que lo que hace es desplazar el recuadro marrón tantos píxeles como se les diga.
El resultado aparece en el recuadro amarillo.
falta que al apretar algún botón finalice la edición y genere un jpg
¿Como genero el jpg?