<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
<script src="cropper.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
ancho=450;
alto=255;
function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
}
// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
'load',
function() {
new Cropper.ImgWithPreview(
'testImage',
{
minWidth: ancho,
minHeight: alto,
ratioDim: { x: ancho, y: alto },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: 'previewArea'
}
)
}
);
//Con esta funcion recorremos los radios para saber cual es el que está chequeado
function qradiobuttones(ctrl)
{
for(i=0;i<ctrl.length;i++)
if(ctrl[i].checked) return ctrl[i].value;
}
function qtamanio(){
ancho=qradiobuttones(document.form1.tamanio);
if(ancho==450){
alto=255;
}
else{
alto=450;
}
new Cropper.ImgWithPreview(
'testImage',
{
minWidth: ancho,
minHeight: alto,
ratioDim: { x: ancho, y: alto },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: 'previewArea'
}
)
};
</script>
<link rel="stylesheet" type="text/css" href="debug.css" media="all" />
<style type="text/css">
label {
clear: left;
margin-left: 50px;
float: left;
width: 5em;
}
#testWrap {
width: 500px;
float: left;
margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
}
#previewArea {
margin: 20px; 0 0 20px;
float: left;
}
#results {
clear: both;
}
</style>
</head>
<body>
<form name="form1" method="post" action="guardar_imagen_nueva.php?strimagen=<? echo ($strimagen); ?>&idserie=<? echo $stridserie;?>&estilo=<? echo $strestilo;?>" enctype="multipart/form-data">
<table width="551" border="0" cellpadding="5" cellspacing="0">
<tr class="texto_normal">
<td width="226">
<span class="texto00">Posición</span> de la imagen<br>
<input name="posicionfoto" type="TEXT" class="formula" id="posicionfoto" size="20"></td>
<td width="363">
<input name="tamanio" type="radio" value="450" onclick="qtamanio()" checked/>
Horizontal
<input name="tamanio" type="radio" value="255" onclick="qtamanio()">
Vertical
</td>
</tr>
</table>
<div id="testWrap">
<img src="proceso/<? echo ($strimagen); ?>" id="testImage">
</div>
<div id="previewArea"></div>
<p> </p>
<p> </p>
<p> </p>
<div id="results">
<p>
<label for="x1">x1:</label>
<input type="text" name="x1" id="x1" />
</p>
<p>
<label for="y1">y1:</label>
<input type="text" name="y1" id="y1" />
</p>
<p>
<label for="x2">x2:</label>
<input type="text" name="x2" id="x2" />
</p>
<p>
<label for="y2">y2:</label>
<input type="text" name="y2" id="y2" />
</p>
<p>
<label for="width">Ancho:</label>
<input type="text" name="width" id="width" />
</p>
<p>
<label for="height">Alto:</label>
<input type="text" name="height" id="height" />
</p>
</div>
<br /><br />
<input type="SUBMIT" value="Guardar">
</form>