<?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>Gregwar &#187; gd</title>
	<atom:link href="http://www.gregwar.com/tag/gd/feed" rel="self" type="application/rss+xml" />
	<link>http://www.gregwar.com</link>
	<description>Web &#38; technologies</description>
	<lastBuildDate>Wed, 28 Dec 2011 19:24:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Manipulation d&#8217;images sous Symfony2</title>
		<link>http://www.gregwar.com/php/manipulation-dimages-sous-symfony2-208</link>
		<comments>http://www.gregwar.com/php/manipulation-dimages-sous-symfony2-208#comments</comments>
		<pubDate>Mon, 08 Aug 2011 21:11:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[gd]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[manipulation]]></category>
		<category><![CDATA[symfony2]]></category>

		<guid isPermaLink="false">http://www.gregwar.com/?p=208</guid>
		<description><![CDATA[Dans un article précédent, je montrais une bibliothèque permettant de manipuler des images d&#8217;une manière un peu particulière, mais à mon sens intéréssant. Ici, nous allons parler de la façon dont cette bibliothèque peut s&#8217;intégrer à Symfony2.
Je travaille actuellement sous Symfony2 et j&#8217;ai été amené à manipuler des images dans une application que je développe. [...]]]></description>
			<content:encoded><![CDATA[<p>Dans un <a href="http://www.gregwar.com/programmation/manipulez-vos-images-avec-php-198">article précédent</a>, je montrais une <a href="https://github.com/Gregwar/Image">bibliothèque</a> permettant de manipuler des images d&#8217;une manière un peu particulière, mais à mon sens intéréssant. Ici, nous allons parler de la façon dont cette bibliothèque peut s&#8217;intégrer à Symfony2.</p>
<p>Je travaille actuellement sous Symfony2 et j&#8217;ai été amené à manipuler des images dans une application que je développe. Ayant déjà sous la main ma propre classe de gestion d&#8217;images, j&#8217;ai décidé de l&#8217;intégrer au framework à l&#8217;aide d&#8217;un Bundle. Comme vous pourrez le remarquer si vous jetez un oeil au <a href="https://github.com/Gregwar/ImageBundle">projet git correspondant</a>, l&#8217;intégration de la classe dans un bundle Symfony2 ne nécéssite pas beaucoup de code supplémentaire.</p>
<h2>Installation</h2>
<p>Commencez par placer le dépôt git dans vos dépendances et clonez-le. Ajoutez alors l&#8217;espace de nom Gregwar à votre <em>app/autoloader.php</em> :</p>
<pre class="brush: php">&#039;Gregwar&#039; =&gt; __DIR__.&#039;/../vendor/gregwar-image/bundle/&#039;,</pre>
<p>Une fois fait, ajouter le bundle à votre <em>app/AppKernel.php </em>:</p>
<pre class="brush: php">...
public function registerBundles()
{
$bundles = array(
...
new Gregwar\ImageBundle\GregwarImageBundle(),
...
);
...</pre>
<p>Il ne vous reste plus qu&#8217;à ajouter à votre fichier de configuration (ex: <em>app/config/config.yml</em>) :</p>
<pre class="brush: bash">gregwar_image: ~</pre>
<p>Puis, créez le dossier web/cache et donnez les permissions à apache d&#8217;écrire dedans</p>
<pre class="brush: bash">mkdir web/cache
chmod 777 web/cache</pre>
<p>Si vous voulez utiliser un autre nom, précisez le dans la configuration:</p>
<pre class="brush: bash">gregwar_image:
   cache_dir: mes_fichies_caches</pre>
<h2>Services fournis</h2>
<p>Ce Bundle Symfony2 vous fournit principalement deux choses:</p>
<ol>
<li>Un service <em>image.handling</em> permettant d&#8217;utiliser la classe <em>Gregwar\Image</em> avec l&#8217;injection de dépendance;</li>
<li>Un helper twig, qui vous permet d&#8217;utiliser les fonctionnalités de <em>Gregwar\Image </em>directement dans vos templates</li>
</ol>
<p>Je ne m&#8217;attarderais pas sur le premier point, vous l&#8217;aurez vite compris, vous pouvez écrire des lignes de la forme:</p>
<pre class="brush: php">$this-&gt;get(&#039;image.handling&#039;)-&gt;open(&#039;linux.jpg&#039;)
    -&gt;grayscale()
    -&gt;rotate(12)
    -&gt;save(&#039;out.jpg&#039;)</pre>
<p>Dans vos contrôleurs ou dans n&#8217;importe quel classe ayant accès aux services, ce qui peut s&#8217;avérer pratique !</p>
<p>La partie intéréssante repose sur l&#8217;helper Twig, qui peut être très utile en tirant profit du dossier de cache. Le bundle enregistre la fonction twig<em> image()</em> qui fournit la même API qu&#8217;avec la classe <em>Gregwar\Image</em>. Un exemple:</p>
<pre class="brush: html">&lt;!-- template.html.twig --&gt;
&lt;img src=&quot;{{ image(&#039;linux.png&#039;).resize(&#039;30%&#039;).rotate(-12).jpeg }}&quot; alt=&quot;&quot; /&gt;</pre>
<p>Le résultat sera alors l&#8217;adresse du fichier de cache hashé. Petit bonus: cet helper fait lui-même appel à l&#8217;helper <em>asset()</em> pour le chemin du fichier de cache.</p>
<p>Vous pouvez également profiter de l&#8217;API de la classe image:</p>
<pre class="brush: html">linux.png a une largeur de {{ image(&#039;linux.png&#039;).width }} px</pre>
<p><a href="https://github.com/Gregwar/ImageBundle">Dépôt Gregwar/ImageBundle sur Github</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gregwar.com/php/manipulation-dimages-sous-symfony2-208/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Maitrisez la taille de vos images</title>
		<link>http://www.gregwar.com/php/maitrisez-la-taille-de-vos-images-40</link>
		<comments>http://www.gregwar.com/php/maitrisez-la-taille-de-vos-images-40#comments</comments>
		<pubDate>Mon, 25 Jan 2010 21:54:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[gd]]></category>
		<category><![CDATA[image]]></category>

		<guid isPermaLink="false">http://www.slashed.fr/?p=40</guid>
		<description><![CDATA[Voici une solution générique au problème souvent rencontré de la gestion de la taille des images. En effet, et comme vous le savez, redimensionner un objet &#60;img&#62; a tendance à faire charger à l&#8217;utilisateur une image beaucoup trop grosse pour ce qu&#8217;il en verra, de plus les navigateurs n&#8217;ont pas toujours de modules d&#8217;anti-aliasing. La [...]]]></description>
			<content:encoded><![CDATA[<p>Voici une solution générique au problème souvent rencontré de la gestion de la taille des images. En effet, et comme vous le savez, redimensionner un objet &lt;img&gt; a tendance à faire charger à l&#8217;utilisateur une image beaucoup trop grosse pour ce qu&#8217;il en verra, de plus les navigateurs n&#8217;ont pas toujours de modules d&#8217;anti-aliasing. La solution bien connue est de générer, coté serveur, des images de la bonne dimension (qu&#8217;il s&#8217;agisse de miniature ou pas).</p>
<p>J&#8217;ai écrit cette classe pour essayer de me débarasser de ce problème ennuyeux, voici comment elle fonctionne.</p>
<h2>Chargement d&#8217;une image</h2>
<p>Tout d&#8217;abord, il faut instancier l&#8217;image, puis lui dire quel fichier charger</p>
<pre class="brush: php">$i = new Image;
$i-&gt;fromFile(&quot;image.jpg&quot;);
</pre>
<p>Le paramètre peut aussi être passé directement dans le constructeur, afin de gagner de la place:</p>
<pre class="brush: php">$i = new Image(&quot;image.jpg&quot;);
</pre>
<h2>Appliquer une redimension</h2>
<p>Il existe ensuite plusieurs façon de redimensionner l&#8217;image, voici des exemples pour mieux comprendre.</p>
<div id="attachment_41" class="wp-caption aligncenter" style="width: 210px"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo.jpg"><img class="size-full wp-image-41" title="logo" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo.jpg" alt="" width="200" height="92" /></a><p class="wp-caption-text">Image d&#39;origine, 200x92</p></div>
<div id="attachment_43" class="wp-caption aligncenter" style="width: 310px"><span style="text-decoration: underline;"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo_resize_300.jpg"><img class="size-full wp-image-43" title="logo_resize_300" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo_resize_300.jpg" alt="" width="300" height="300" /></a></span><p class="wp-caption-text">$i-&gt;;resize(300,200), réduit éventuellement l&#39;image mais ne l&#39;agrandit jamais (pratique pour les miniatures)</p></div>
<div id="attachment_45" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo_scaleResize_300.jpg"><img class="size-full wp-image-45" title="logo_scaleResize_300" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo_scaleResize_300.jpg" alt="" width="300" height="300" /></a><p class="wp-caption-text">$i-&gt;scaleResize(300,200), redimensionne l&#39;image en gardant le ratio de maniere a la faire tenir dans la place attribuée</p></div>
<div id="attachment_46" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo_forceResize_300.jpg"><img class="size-full wp-image-46" title="logo_forceResize_300" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo_forceResize_300.jpg" alt="" width="300" height="300" /></a><p class="wp-caption-text">$i-&gt;forceResize(300,200), force l&#39;image a faire exactement la taille donnée, sans que le ratio ne compte (peut déformer)</p></div>
<div id="attachment_47" class="wp-caption aligncenter" style="width: 270px"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo_forceResize_120.jpg"><img class="size-full wp-image-47" title="logo_forceResize_120" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo_forceResize_120.jpg" alt="" width="260" height="120" /></a><p class="wp-caption-text">$i-&gt;forceResize(null, 120), force l&#39;image a faire 120 de hauteur, le ratio sera gardé</p></div>
<div id="attachment_51" class="wp-caption aligncenter" style="width: 160px"><a href="http://www.slashed.fr/wp-content/uploads/2010/01/logo_cropResize_150_100.jpg"><img class="size-full wp-image-51" title="logo_cropResize_150_100" src="http://www.slashed.fr/wp-content/uploads/2010/01/logo_cropResize_150_100.jpg" alt="" width="150" height="69" /></a><p class="wp-caption-text">$i-&gt;cropResize(150,100), fonctionne comme resize mais coupe l&#39;espace blanc autour de l&#39;image (revient à limiter la largeur et la hauteur)</p></div>
<h2>Chaîne d&#8217;opération</h2>
<p>Notons que tout l&#8217;interêt du code que je présente ici est que les opérations ne sont pas appliquées. En effet apres une ouverture (<em>fromFile</em>) et une redimension (<em>resize&#8230;</em>) la classe n&#8217;a strictement rien fait d&#8217;autre que d&#8217;enregistrer tout ce qui lui est demandé. Il est alors possible de la forcer à effectuer les opérations et à sauvegarder l&#8217;image avec la fonction <em>save()</em> (voir plus bas). Mais l&#8217;option la plus interessante est de lui demander d&#8217;utiliser son système de cache de manière à tout gérer automatiquement.</p>
<p>En appellant la méthode <em>cacheFile()</em>, la classe commencera à calculer un hash de tout ce qui lui est demandé (les opérations, le fichier d&#8217;origine, le format demandé etc.) et générera alors un nom de fichier de cache. Si ce fichier existe, elle ne fera strictement rien d&#8217;autre que de retourner le nom de ce fichier. Si il n&#8217;existe pas, elle appellera <em>save</em><em>()</em>, la fonction permettant de générer l&#8217;image en la sortant dans le fichier de cache.</p>
<p>Les fonctions <em>jpeg(), gif() et png()</em> sont des raccourcis de <em>cacheFile()</em>.</p>
<h2>Exemples et raccourcis</h2>
<p>Voici un exemple d&#8217;execution détaillé:</p>
<pre class="brush: php">//Créé l&#039;instance
$i = new Image;
//Charge l&#039;image &quot;image.jpg&quot;
$i-&gt;fromFile(&quot;image.jpg&quot;);
//Utilise une redimension non-agrandissante dans une boite 300x200
$i-&gt;resize(300, 200);
//Applique les modifications ou alors récupere le cache correspondant
// $file contiendra le nom du fichier cache obtenu
$file = $i-&gt;jpeg();
</pre>
<p>Et la version raccourcie, grace à la définition de la fonction <em>Image()</em> et des <em>return $this;</em> Imaginez que vous écriviez une gallerie photo dans laquelle vous souhaitez mettre des miniatures en 120&#215;120:</p>
<pre class="brush: html">&lt;img src=&quot;&lt;? echo Image($file)-&gt;resize(120,120)-&gt;jpeg();  ?&gt;&quot; alt=&quot;&quot; /&gt;
</pre>
<p>L&#8217;interêt est de mêler étroitement la simplicité d&#8217;écriture et les performances. Lorsque le fichier de cache existe déja, l&#8217;utilisation de la classe Image ne nécessite que le calcul d&#8217;un hash et quelques vérifications. Une fois le dossier de cache correctement configuré, cette ligne suffira a maitriser le rendu des images.</p>
<h2>Autre utilisation, rendu dans un fichier</h2>
<p>Nous voudrons parfois pouvoir utiliser ce système non pas à l&#8217;affichage, mais à un instant précis du code. Pour cela vous pouvez utiliser la fonction <em>save</em><em>($fichier, $format=&nbsp;&raquo;jpg&nbsp;&raquo;, $qualite=80)</em>.</p>
<pre class="brush: php">//Ouverture de l&#039;image
$i = new Image($file_name);
//Utilise une redimension non-agrandissante dans une boite 120x120
$i-&gt;resize(120, 120);
//Sauvegarde le résultat dans le répertoire des miniatures (thumb)
$i-&gt;save($thumb_dir.$file_name, &quot;jpg&quot;);
</pre>
<p>Pour conclure voici les sources de la classe en question:<br />
<a href="http://www.slashed.fr/source/Image/Image.class.phps" target="_blank">Voir le code source de la classe Image</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gregwar.com/php/maitrisez-la-taille-de-vos-images-40/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

