<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog do Beraldo &#187; thumbnail</title>
	<atom:link href="http://www.rberaldo.com.br/blog/tag/thumbnail/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rberaldo.com.br/blog</link>
	<description>Programação, Música, Entretenimento e o que mais me vier à mente</description>
	<lastBuildDate>Mon, 06 Feb 2012 14:30:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Reduzir imagens mantendo a proporção</title>
		<link>http://www.rberaldo.com.br/blog/reduzir-imagens-mantendo-a-proporcao/</link>
		<comments>http://www.rberaldo.com.br/blog/reduzir-imagens-mantendo-a-proporcao/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 03:46:50 +0000</pubDate>
		<dc:creator>Beraldo</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[GD]]></category>
		<category><![CDATA[miniatura]]></category>
		<category><![CDATA[proporção]]></category>
		<category><![CDATA[thumbnail]]></category>

		<guid isPermaLink="false">http://www.rberaldo.com.br/blog/?p=92</guid>
		<description><![CDATA[Muita gente tem dúvida em como reduzir uma imagem mantendo a proporção entre largura e altura. Neste artigo é exibida uma solução simples para esse problema.]]></description>
			<content:encoded><![CDATA[<p>Muita gente tem dúvida em como reduzir uma imagem mantendo a proporção entre largura e altura. A solução é simples. Lógica pura. Matemática, na verdade. :P</p>
<p><span id="more-92"></span><br />
Vamos a um exemplo simples e explicado.</p>
<p>Definimos o caminho à imagem a ser reduzida:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// imagem a ser reduzida</span>
<span style="color: #000088;">$foto</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'foto2.jpg'</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Definimos as dimensões máximas da imagem</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// dimensões máximas da imagem, em pixels (largura e altura)</span>
<span style="color: #000088;">$tamMax</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">200</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">240</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Usando a função getimagesize(), do PHP, obtemos a largura, a altura e o tipo da imagem:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// 0 =&gt; largura</span>
<span style="color: #666666; font-style: italic;">// 1 =&gt; Altura</span>
<span style="color: #666666; font-style: italic;">// 2 =&gt; Formato da imagem</span>
<span style="color: #990000;">list</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$imgLarg</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgAlt</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgTipo</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">getimagesize</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$foto</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Esta parte faz o cálculo das novas dimensões da imagem</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// verifica se a imagem é maior que o máximo permitido</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$imgLarg</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$tamMax</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> <span style="color: #000088;">$imgAlt</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$tamMax</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #666666; font-style: italic;">// verifica se a largura é maior que a altura</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$imgLarg</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$imgAlt</span> <span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$novaLargura</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tamMax</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$novaAltura</span> <span style="color: #339933;">=</span> <span style="color: #990000;">round</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$novaLargura</span> <span style="color: #339933;">/</span> <span style="color: #000088;">$imgLarg</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #000088;">$imgAlt</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #666666; font-style: italic;">// se a altura for maior que a largura</span>
	<span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$imgAlt</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$imgLarg</span> <span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$novaAltura</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$tamMax</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$novaLargura</span> <span style="color: #339933;">=</span> <span style="color: #990000;">round</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$novaAltura</span> <span style="color: #339933;">/</span> <span style="color: #000088;">$imgAlt</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #000088;">$imgLarg</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #666666; font-style: italic;">// altura == largura</span>
	<span style="color: #b1b100;">else</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$novaAltura</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$novaLargura</span> <span style="color: #339933;">=</span> <span style="color: #990000;">max</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$tamMax</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #b1b100;">else</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;não é necessário redimensionar&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Por fim, criamos as imagens, fazemos o redimensionamento e exibimos a imagem desejada no navegador:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// cria a imagem baseada na imagem original</span>
<span style="color: #000088;">$srcImg</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatefromjpeg</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$foto</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// cria a nova imagem</span>
<span style="color: #000088;">$destImg</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatetruecolor</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$novaLargura</span><span style="color: #339933;">,</span> <span style="color: #000088;">$novaAltura</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// copia para a imagem de destino a imagem original redimensionada</span>
<span style="color: #990000;">imagecopyresampled</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$destImg</span><span style="color: #339933;">,</span> <span style="color: #000088;">$srcImg</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #000088;">$novaLargura</span><span style="color: #339933;">,</span> <span style="color: #000088;">$novaAltura</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgLarg</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgAlt</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// cabeçalho para exibir a imagem no navegador.</span>
<span style="color: #666666; font-style: italic;">// se for salvar em arquivo, não é necessário</span>
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'content-type: image/jpeg'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// exibe a imagem</span>
<span style="color: #990000;">imagejpeg</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$destImg</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// destrói as imagens geradas</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$destImg</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$srcImg</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Usei funções específicas para jpeg pois, nesse caso, usei uma imagem definida no script. Para criar um script genérico, você pode usar o terceiro elemento do array retornado por getimagesize(), a fim de chamar uma função conforme o tipo da imagem. Isso pode ser feito com o auxílio da função call_user_func.</p>
<p>Post simples. Apenas para sanar uma dúvdia recorrente por aí.<br />
Solução simples. :)</p>
<p>Links úteis:<br />
<a title="Referência das funções da biblioteca GD" href="http://br2.php.net/manual/pt_BR/book.image.php" target="_blank" onclick="urchinTracker('/outgoing/br2.php.net/manual/pt_BR/book.image.php?referer=');"> Referência das funções da biblioteca GD</a><br />
<a title="Documentação da função call_user_func" href="http://br2.php.net/manual/pt_BR/function.call-user-func.php" target="_blank" onclick="urchinTracker('/outgoing/br2.php.net/manual/pt_BR/function.call-user-func.php?referer=');"> Documentação da função call_user_func</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rberaldo.com.br/blog/reduzir-imagens-mantendo-a-proporcao/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

