Recortar imagen y subir imagen recortada

ernest_mataro · #1 (**permalink**) 18/11/2010, 11:57

Tengo estos codigos que encontre para recortar imágenes:
El primero llamado recortar.html

Código PHP:

  <?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Sentido Web - Recortar Imagen</title> 
<style type="text/css"> 
    span#marco { 
        width: 0px; 
        height: 0px; 
        position: absolute; 
        left: 0px; 
        top: 0px; 
        z-index: 100; 
        border: 2px solid #DD0000; 
        display: none; 
        background: transparent; 
    } 
     
    div.contenedor { 
    position: relative; 
    width: 500px; 
    height: 375px; 
    margin: 0px; 
    padding: 0px; 
    } 
     
    div.res { 
        position: absolute; 
        top: 0px; 
        left: 0px; 
        margin-left: 520px; 
        margin-top: 20px; 
    } 
</style> 
<script type="text/javascript"> 
    var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE 
    var inicio = false; 
    var xini = 0; 
    var yini = 0; 
    var xfin = 0; 
    var yfin = 0; 
     
    function posicionaMarco(e) { 
        inicio = !inicio; 
        var marco = document.getElementById("marco"); 
         
        if (inicio) { 
            marco.style.display = "block"; 
 
            // En IE y Opera se usa otra propiedad del evento 
            if (_IE_) { 
                xini = e.offsetX; 
                yini = e.offsetY; 
            } else { 
                xini = e.layerX; 
                yini = e.layerY; 
            } 
            marco.style.left = xini+"px"; 
            marco.style.top = yini+"px"; 
            marco.style.width = "0px"; 
            marco.style.height = "0px"; 
        }  
    } 
     
    function despliegaMarco(e) { 
 
        if (inicio) { 
            var marco = document.getElementById("marco"); 
 
            // En IE y Opera se usa otra propiedad del evento 
            if (_IE_) { 
                xfin = e.offsetX-7; 
                yfin = e.offsetY-7; 
            } else { 
                xfin = e.layerX-7; 
                yfin = e.layerY-7; 
            } 
            if (xfin > xini+5) { 
                marco.style.width = (xfin-xini)+"px"; 
            } 
            if (yfin > yini+5) { 
                marco.style.height = (yfin-yini)+"px"; 
            } 
        } 
    } 
 
    function cortar() { 
        document.getElementById("res").src = "recortar.php?img=recortar/flores.jpg&xini="+(xini)+"&yini="+(yini)+"&xfin="+(xfin)+"&yfin="+(yfin); 
    } 
 
</script> 
</head> 
<body> 
<div class="res"><img id="res" src="" alt="Resultado"></div> 
<div class="contenedor" onclick="posicionaMarco(event)" onmousemove="despliegaMarco(event)"> 
    <img src="recortar/flores.jpg" alt="photo &amp;copy; Michael Jastremski for openphoto.net CC:Attribution-ShareAlike" /><span id="marco"></span></div> 
<p>photo &copy; Michael Jastremski for <a href="http://openphoto.net">openphoto.net</a> CC:Attribution-ShareAlike</p> 
<input type="button" value="Cortar" onclick="cortar()" /> 
<div id="kk"></div> 
</body> 
</html>

y el segundo que es el que hace la acción Recortar.php

Código PHP:

  <?php 
    // Abre la imagen 
    $fichero = getcwd()."/".$_GET["img"]; 
 
    if (preg_match('/.png$/', $fichero)) { 
        $img = imagecreatefrompng($fichero); 
    } else if (preg_match('/.gif$/', $fichero)) { 
        $img = imagecreatefromgif($fichero); 
    } else if (preg_match('/.jpg$/', $fichero)) { 
        $img = imagecreatefromjpeg($fichero); 
    } 
     
    $xini = $_GET["xini"]; 
    $yini = $_GET["yini"]; 
    $xfin = $_GET["xfin"]; 
    $yfin = $_GET["yfin"]; 
 
    $res = imagecreatetruecolor ($xfin-$xini, $yfin-$yini); 
    imagecopy($res, $img, 0, 0, $xini, $yini, $xfin-$xini, $yfin-$yini); 
    header("Content-type: image/png"); 
    imagepng($res); 
?>

En lo que me gustaría que me ayudaraís, si podeis, es que debo añadir a este último php para que me suba la imagen recortada al servidor. Llevo unos días intentandolo pero como soy un principiante no me sale.
Como simepre os lo agradezco por adelantado, Merci

.

chalchis · #2 (**permalink**) 19/11/2010, 00:54

antes de recortar tienes que enviar la imagen al server para luego procesar
el recorte

ernest_mataro · #3 (**permalink**) 20/11/2010, 01:58

Si, la imagen ya la subo al servido.ME puedes dar una idea de como se procesa el recorte, chalchis?