Foros del Web » Programando para Internet » Javascript »

Recortar imagenes

 Estas en el tema de Recortar imagenes en el foro de Javascript en Foros del Web. Hola a todos, soy nueva en javascript y estoy creando un panel de control en el que el usuario puede recortar las imágenes, hasta ahí ...
  #1 (permalink)  
Antiguo 26/03/2008, 09:12
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 19 años, 7 meses
Puntos: 0
Pregunta Recortar imagenes
Hola a todos, soy nueva en javascript y estoy creando un panel de control en el que el usuario puede recortar las imágenes, hasta ahí todo bien, mi problema viene cuando le he puesto la opcion de elegir el tamaño a traves de dos radio buttons para que me recorte la imágen en horizontal o en vertical, pero si vuelvo a ejecutar la funcion de armarme el recuadro con los tamaños que le he dicho, no me borra el recuadro viejo. Os dejo el código para que me entendais mejor:

Cita:
<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&oacute;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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>
Lo de new cropper es el que me muestra el área a recortar, pero no me borra la anterior y no se como decírselo.

Gracias y saludos
  #2 (permalink)  
Antiguo 27/03/2008, 02:46
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 19 años, 7 meses
Puntos: 0
Pregunta Re: Recortar imagenes
... a alguien se le ocurre algo??
  #3 (permalink)  
Antiguo 27/03/2008, 05:12
 
Fecha de Ingreso: mayo-2005
Ubicación: Castellón
Mensajes: 321
Antigüedad: 19 años, 7 meses
Puntos: 0
Re: Recortar imagenes
He probado con borrando Cropper.ImgWithPreview y volverla a crear cuando pulso sobre un radio button:
Cita:
delete Cropper.ImgWithPreview('testImage');
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'
}
)
Pero no se si lo hago bien, ni se si es lo correcto..... y no me funciona.....
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:28.