Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vinicius Oliveira Garcia

Problemas com o Jcrop

Por , em PHP

Recommended Posts

Vinicius Oliveira Garcia    0

Vinicius Oliveira Garcia
Postado

Olá pessoal.

Tenho um problema com o jcrop a dias e nada que eu faço surte efeito.

 

Estou usando o jcrop para permitir ao usuario uma funcionalidade identica ao que o orkut tem no cadastro da foto de perfil.

 

Minha página criada está igual ao do link abaixo:

http://deepliquid.com/projects/Jcrop/demos/tutorial3.html [site oficial do Jcrop - tutorial de thumbnails]

 

O que eu quero, é salvar a imagem menor que está sendo gerada ao lado.

Para isso eu criei um código que é baseado no trecho abaixo, disponível no site do Jcrop:

 

<?php

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
   $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

?>

 

Porém, a imagem salva fica errada e não faço idéia do por que.

Nas imagens abixo, aparece meu problema. No canto superior esquerdo, fica a imagem que foi salva no servidor e abaixo a imagem original

e o thumb que eu esperava que fosse salvo.

Percebam que as coordenadas estão indo bem certinhas.

 

https://picasaweb.google.com/vinigarcia87/3DeAgostoDe2011#5636631337891531874

https://picasaweb.google.com/vinigarcia87/3DeAgostoDe2011#5636631464694492450

 

O meu código completo segue abaixo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<title>.:Vinicius Garcia:.</title>

<!-- Jquery -->
<script type="text/javascript" src="recursos/jquery/jquery-1.5.2.min.js"></script>

<!-- Outros componentes -->
<script type="text/javascript" src="recursos/jcrop/jquery.Jcrop.js"></script>
<link 	type="text/css" href="recursos/jcrop/jquery.Jcrop.css" rel="stylesheet"/>

<!-- Estilo do módulo -->
<style type="text/css">
	/* Fixa o tamanho da imagem original, para fins de exibição */
	#cropimg_img_original {
		width: 512px;
		height: 384px;
	}
	/* Configura a div que contém a imagem original */
	#cropimg_div_imagem {
		border: 5px solid white;
		width: 512px;
		height: 384px;
	}
	/* Configura a div que contém a thumbnail */
	#cropimg_div_thumbnail {
		border: 5px solid white;
		width: 215px;
		height: 138px;
		overflow: hidden;
	}
</style>

<?php
	/* Define a imagem que será tratada.
	 * Imagem recebida dos formulários de cadastro
	 * que chamam o tratamento de imagens (noticias,
	 * eventos, ...).
	 */
	$end_imagem = "imagens/img_cavzod.jpg";

	/* Captura o tamanho da imagem original.
	 * (getimagesize pega os valores reais da imagem,
	 * mas setamos valores na mão por motivos de layout)
	 */
	//list($img_w, $img_h) = getimagesize($end_imagem);
	$img_w = 512;
	$img_h = 384;

	/* Define o tamanho que o thumb a ser criado deverá ter.
	 * Altere as variaveis a seguir para modificar o tamanho
	 * que a imagem gerada terá.
	 */
	$thumb_w = 215;
	$thumb_h = 138;

	if (!empty($_POST)){
		$jpeg_quality = 90;

		$x1 = $_POST['x'];
		$y1 = $_POST['y'];
		$x2 = $_POST['x2'];
		$y2 = $_POST['y2'];
		$w = $_POST['w'];
		$h = $_POST['h'];

		$src = $end_imagem;
		$img_r = imagecreatefromjpeg($src);
		$dst_r = ImageCreateTrueColor($thumb_w, $thumb_h);

echo '('.$x1.','.$y1.') ('.$x2.','.$y2.') '.$w.'x'.$h.'<br/>';
imagecopyresampled($dst_r, $img_r
		/* $dst_x */	,0
		/* $dst_y */	,0
		/* $src_x */	,$x1
		/* $src_y */	,$y1
		/* $dst_w */	,$thumb_w
		/* $dst_h */	,$thumb_h
		/* $src_w */	,$w
		/* $src_h */	,$h
		);

		//header('Content-type: image/jpeg');
		imagejpeg($dst_r, $end_imagem, $jpeg_quality);

		echo "<img src='".$end_imagem."' id='show_thumb_created'/><br/>";

		//exit;
	}
?>

<!-- Script do módulo -->
<script type='text/javascript'>
	//Informe o tamanho da imagem original
	var img_w = <?php echo $img_w; ?>;
	var img_h = <?php echo $img_h; ?>;
	//Informe o tamanho que deverá ter o thumbnail
	var thumb_w = <?php echo $thumb_w; ?>;
	var thumb_h = <?php echo $thumb_h; ?>;

	jQuery(function($){
		//Instancia o crop de imagens no elemento selecionado
		$("#cropimg_img_original").Jcrop({
			onChange: updatePreview,
			onSelect: updatePreview,
			onRelease:  clearCoords
			,aspectRatio: 1.4444444 //Proporção: 1.33 (( 1024x768 -> 256x192 -> 512x384 ))
		});

		//Atualiza o thumbnail e a exibição de coordenadas
		function updatePreview(c){
			if (parseInt(c.w) > 0){
				var rx = thumb_w / c.w;
				var ry = thumb_h / c.h;

				$("#cropimg_img_preview").css({
					width: Math.round(rx * img_w) + "px",
					height: Math.round(ry * img_h) + "px",
					marginLeft: "-" + Math.round(rx * c.x) + "px",
					marginTop: "-" + Math.round(ry * c.y) + "px"
				});
			}

			//Carrega a exibição de coordenadas
			$("#x").val(c.x);
			$("#y").val(c.y);
			$("#x2").val(c.x2);
			$("#y2").val(c.y2);
			$("#w").val(c.w);
			$("#h").val(c.h);
		};

		//Limpa a exibição de coordenadas
		function clearCoords(){
			$("#cropimg_coords input").val("");
			$("#h").css({ color:"red" });
			window.setTimeout(function(){ $("#h").css({color:"inherit"}); }, 500);
		};

		//Verifica se existe uma região selecionada
		function checkCoords(){
			if (parseInt($("#w").val())){
				return true;
			}else{
				alert("Selecione o trecho de imagem para criar a miniatura");
				return false;
			}
		};
	});
</script>
</head>
<body>
<div align="center">
	<h1>.:. Jcrop - Imprimindo as coordenadas .:.</h1>
	<div id="wait"></div>
	<table>
		<tr>
			<td><div id="cropimg_div_imagem"><img src="<?php echo $end_imagem; ?>" id="cropimg_img_original"/></div></td>
			<td><div id="cropimg_div_thumbnail"><img src="<?php echo $end_imagem; ?>" id="cropimg_img_preview"/></div></td>
		</tr>
	</table>
	<br/>
	<form id="cropimg_coords" method="post" action="" onsubmit="return checkCoords();">
		<input type="text" id="x" name="x"/>
		<input type="text" id="y" name="y"/>
		<input type="text" id="x2" name="x2"/>
		<input type="text" id="y2" name="y2"/>
		<input type="text" id="w"  name="w" />
		<input type="text" id="h"  name="h" />
		<br/>
		<input type="submit" value="Cortar Imagem"/>
	</form>
</div>
</body>
</html>

 

Uma informação adicional é que no programa verdadeiro (esse dai é uma página teste) eu salvo a imagem uploaded para uma imagem com 512px

de lado e altura proporcional. E a partir dela que eu faço todos os procedimentos.

 

Então, a pergunta é:

Alguém tem alguma idéia do que eu estou fazendo errado?

Alguém sabe como consertar ou como seria o correto?

 

Pessoal, a criação dessa página é muito importante para o meu website e eu já não sei mais a quem recorrer!

Espero que alguém aqui possa me ajudar!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Oliveira Garcia    0

Vinicius Oliveira Garcia
Postado

Soh pra deixar claro aqui pessoal,

descobri o problema e era bem simples...

eu tirei os limitadores height e width da <div> e da <img> que contém a imagem original.

De alguma forma, a presença deles alterava as coordenadas que eram passadas e, assim, o resultado do crop.

 

No meu projeto onde utilizo esse módulo de crop (acima era soh um teste) eu recebo imagens de qualquer tamanho do usuário,

salvo elas em uma pasta temporária redimensionando a largura para 512 e deixando a altura proporcional (o que faz com que eu nunca saiba

previamente o valor) e então abro a janela de edição da imagem (parecida com a do meu exemplo acima) buscando a imagem por essa que eu slavei.

 

Como eu limitava por css o tamanho da <div> que continha a imagem original, ela sempre ficava diferente da imagem que eu realmente tinha salvo,

então o crop não dava certo.

 

As formatações de tamanho nas <div> não são necessárias por que eu já tenho certeza do tamanho que minha imagem vai ter (já salvei ela do tamanho

correto).

 

Erro simples, mas difícil de encontrar. Perdi dois dias =S

Fica ai minha solução para quem mais tiver esse problema.

 

Para manipular melhor as imagens eu aconselho a classe canvas.php (http://www.daviferreira.com/posts/canvas-nova-classe-para-manipulacao-e-redimensionamento-de-imagens-com-php) que é bem simples e fácil de usar.

 

De qualquer forma, obrigado a todos que leram a thread! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito