Muy buenas a todos, tengo un problema con Cropzoom y es el que no puedo implementarlo ... intente de varias formas pero no.
Aunque fue echo en javascript, vino con un archivo para procesar el codigo en php, tambien existe una variante en asp(pero no es el caso).
Bueno, la realidad es que estoy muy perdido ...
Código PHP:
<?php
list($width, $height) = getimagesize($_POST["imageSource"]);
$pWidth = $_POST["imageW"];
$pHeight = $_POST["imageH"];
$ext = end(explode(".",$_POST["imageSource"]));
$function = returnCorrectFunction($ext);
$image = $function($_POST["imageSource"]);
$width = imagesx($image);
$height = imagesy($image);
// Resample
$image_p = imagecreatetruecolor($pWidth, $pHeight);
setTransparency($image,$image_p,$ext);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $pWidth, $pHeight, $width, $height);
imagedestroy($image);
$widthR = imagesx($image_p);
$hegihtR = imagesy($image_p);
if($_POST["imageRotate"]){
$angle = 360 - $_POST["imageRotate"];
$image_p = imagerotate($image_p,$angle,0);
$pWidth = imagesx($image_p);
$pHeight = imagesy($image_p);
}
if($pWidth > $_POST["viewPortW"]){
$src_x = abs(abs($_POST["imageX"]) - abs(($_POST["imageW"] - $pWidth) / 2));
$dst_x = 0;
}else{
$src_x = 0;
$dst_x = $_POST["imageX"] + (($_POST["imageW"] - $pWidth) / 2);
}
if($pHeight > $_POST["viewPortH"]){
$src_y = abs($_POST["imageY"] - abs(($_POST["imageH"] - $pHeight) / 2));
$dst_y = 0;
}else{
$src_y = 0;
$dst_y = $_POST["imageY"] + (($_POST["imageH"] - $pHeight) / 2);
}
$viewport = imagecreatetruecolor($_POST["viewPortW"],$_POST["viewPortH"]);
setTransparency($image_p,$viewport,$ext);
imagecopy($viewport, $image_p, $dst_x, $dst_y, $src_x, $src_y, $pWidth, $pHeight);
imagedestroy($image_p);
$selector = imagecreatetruecolor($_POST["selectorW"],$_POST["selectorH"]);
setTransparency($viewport,$selector,$ext);
imagecopy($selector, $viewport, 0, 0, $_POST["selectorX"], $_POST["selectorY"],$_POST["viewPortW"],$_POST["viewPortH"]);
$file = "tmp/test".time().".".$ext;
parseImage($ext,$selector,$file);
imagedestroy($viewport);
//Return value
echo $file;
/* Functions */
function returnCorrectFunction($ext){
$function = "";
switch($ext){
case "png":
$function = "imagecreatefrompng";
break;
case "jpeg":
$function = "imagecreatefromjpeg";
break;
case "jpg":
$function = "imagecreatefromjpeg";
break;
case "gif":
$function = "imagecreatefromgif";
break;
}
return $function;
}
function parseImage($ext,$img,$file = null){
switch($ext){
case "png":
imagepng($img,($file != null ? $file : ''));
break;
case "jpeg":
imagejpeg($img,($file ? $file : ''),90);
break;
case "jpg":
imagejpeg($img,($file ? $file : ''),90);
break;
case "gif":
imagegif($img,($file ? $file : ''));
break;
}
}
function setTransparency($imgSrc,$imgDest,$ext){
if($ext == "png" || $ext == "gif"){
$trnprt_indx = imagecolortransparent($imgSrc);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($imgSrc, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($imgDest, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($imgDest, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($imgDest, $trnprt_indx);
}
// Always make a transparent background color for PNGs that don't have one allocated already
elseif ($ext == "png") {
// Turn off transparency blending (temporarily)
imagealphablending($imgDest, true);
// Create a new transparent color for image
$color = imagecolorallocatealpha($imgDest, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($imgDest, 0, 0, $color);
// Restore transparency blending
imagesavealpha($imgDest, true);
}
}
}
?>
Y vino con 3 archivos mas en javascript llamados
jquery.cropzoom.pack.js
jquery.cropzoom.min.js
jquery.cropzoom.js
Y este CSS:
jquery.cropzoom.css
El problema no esta en javascript, sino como implementarlo en php ...
Contacte con el autor (es opensource Cropzoom, y parece muy bueno
), de forma muy amable me contesto:
"Luciano -
En el index.php (supongo que renderiza HTML) en el html dentro del body tenes que poner un div con un id cualquiera y luego. tenes que implementar cropzoom
var cropzoom_obj = $('#[el id que le pusiste al div]').cropzoom({
Aca tenes que poner las opciones correspondientes, por ejemplo la url de la imagen que vas a cortar, el tamaño que
tiene, etc. (En la documentacion explica para que es cada cosa).
});
luego crea un boton con otro id por ejemplo boton_id
$('#boton_id').click(function(){
cropzoom_obj.send([la url del archivo php que va a cortar la imagen, en el sitio tenes uno de ejemplo],"POST", [aca es por si queres pasar algun otro dato que te haga falta como ser un id o algo],[aca va una funcion que se llamara cuando termine de cortar, normalmente devuelve el nombre de la imagen resultante del cortado]);
});
Bueno espero que esto te sirva.
Saludos"
Soy novato en php y juro que nunca hize algo parecido xD
Head:
Código HTML:
<link href="jquery.cropzoom.css" rel="Stylesheet" type="text/css" />
<script type="javascript" src="jquery.cropzoom.pack.js"></script>
<script type="javascript" src="jquery.cropzoom.min.js"></script>
<script type="javascript" src="jquery.cropzoom.js"></script>
Body:
Código HTML:
<div id="crop">
<script>$(document).ready(function(){
var cropzoom = $('#crop').cropzoom({
width:640,
height:480,
bgColor: '#CCC',
enableRotation:true,
enableZoom:true,
zoomSteps:10,
rotationSteps:10,
expose:{
slidersOrientation: 'horizontal',
zoomElement: '#zoom',
rotationElement: '#rot',
elementMovement:'#movement'
},
selector:{
centered:true,
borderColor:'blue',
borderColorHover:'yellow'
},
image:{
source:'http://66.7.198.196/~resizec/Images/logoresize.gif',
width:576,
height:91,
minZoom:50,
maxZoom:200,
startZoom:40,
useStartZoomAsMinZoom:true,
snapToContainer:true
}
});
});
</script>
<input name="send" type="button" value="send" />
<script>
$('#send').click(function(){
cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
});
</script>
</div> Espero que me puedan orientar o algo :P, no entiendo mas allá de hacer un alerta y redireccionar en javascript :P, pero esto realmente lo necesito ...
Si alguien alguna vez uso esta fabulosa herramienta y me da una mano para adaptarla bendito sea
Lo puse en el apartado de php ya que el archivo que procesa esta en php y estoy trabajando sobre este lenguaje.
La web de esta herramienta es :
http://gastonrobledo.com.ar/cropzoom/download.html
Muchas gracias!, estoy abierto a cualquier tipo de orientacion xD