modificar el tamaño de la imagen

[carolina3]

hola muy buenas estoy creando un formulario para subir una imagen al servidor pero antes de subirla necesito que el usuario pueda modificar el tamaño de la imagen y si fuese posible recortarla o variar su posición,

tengo un script que me carga una imagen y me gustaría que después con algún campo de formulario el usuario pudiera cambiar el tamaño y verla antes de subirla al servidor

Código PHP:

<?php
    $carpeta="tmp/";  //indicamos la carpeta donde se guardará la vista previa
    $name=$carpeta.basename($_FILES['archivo']['name']); //armamos la ruta del archivo subido en formato "tmp/nombredearchivo.png"
 
move_uploaded_file($_FILES['archivo']['tmp_name'],$name);//guardamos el archivo en la carpeta
 
 
 
  
?>
    
 
<script type="text/javascript">
parent.document.getElementById('picture').src='<?php echo $name; ?>';<!-- Le decimos mediante javascript que, busque el id "picture" (campo que tiene la imagen "avatar" y en su lugar muestre lo que acabamos de subir -->
</script>
 

aqui el form

Código HTML:

<script type="text/javascript">
    function setpreview()<!-- creamos la función -->
    {
      document.form1.target='null';  <!-- seteamos el target del formulario en null para que se ejecute dentro del iframe llamado "null"-->
      document.form1.action='uploader.php';<!-- seteamos la acción del formulario hacia nuestro archivo "uploader.php" -->
      document.form1.submit(); <!-- hacemos el envío de información sin salir de la pantalla del formulario -->
    }
 
    function setsubmit()<!-- Creamos la función para que el action del formulario vuelva a ser el archivo que procesa los datos -->
    {
      document.form1.target='_self';<!-- le decimos que se ejecute en el lugar de la página actual -->
      document.form1.action='archivo_que_procesa_tu_form';  <!-- aquí ponemos redefinimos el action del formulario para que se dirija al archivo que ejecuta los datos del form -->
      document.form1.submit();  <!-- enviamos la información -->
    }
    
</script>
 
<form name="form1" action=" " method="post" enctype="multipart/form-data"><!-- El nombre del formulario es el mismo al que llamamos en la funcion javascript, en "action" ponemos el archivo donde irá el formulario una vez completado. No te olvides del "enctype" fundamental para subir archivos -->
<div>Personalizar tu imagen en tamaño y lo que puedas jejeje: </div><!-- este div es solo para poner una leyenda, no es necesario para que funcione bien el script -->
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview()"/></div><!-- campo de archivo donde seleccionamos la imagen de nuestra pc. Aquí le decimos que cuando nuestro campo cambia (onChange) ejecute el código del javascript sin esperar a apretar el boton "submit" del formulario-->
<div><img src="file:avatar.png" id="picture" alt="vista previa" height="300" width="300"/> </div><!-- En este div mostraremos, inicialmente la imagen "avatar.png" pero que, al seleccionar un nuevo archivo en el campo anterior-->
<div style="text-align:center;"><input type="submit" value="Crear Usuario" onclick="setsubmit()"/></div><!--Cuando presionamos el botón llamamos a la función que devuelve el destino original del action hacia el archivo que procesa los datos del formulario -->
</form>
<iframe src="about:blank" name="null" style="display:none">   <!--Escribimos el iframe donde se ejecutará "uploader.php" esto es lo que nos permite ver el preview sin actualizar la página del script.-->
 

una manita porfa