source: spip-zone/_plugins_/fonctions_images/trunk/demo/inc-filtres_images.html @ 120905

Last change on this file since 120905 was 120905, checked in by bruno@…, 12 months ago

version 0.7.0 : nouveau filtre image_tramer

pour tramer une image, de préféence en niveaux de gris, à la LOW←TECH MAGAZINE

File size: 13.9 KB
Line 
1#SET{img,#CHEMIN{images/ecureuil.jpg}|balise_img}
2#SET{couleur1, #c5e41d}
3#SET{couleur2, ##GET{couleur1}|couleur_inverser}
4
5
6<hr>
7
8<!-- image_saturer -->
9<div class="boite" id="image_saturer">
10        <h2 class="boite__titre">image_saturer</h2>
11        <p>
12                Modifie la saturation d'une image<br />
13        </p>
14        <dl class="codeblock">
15                <dt>Syntaxe</dt>
16                <dd><code>image_saturer{1.2}</code></dd>
17                <dt>Paramètre</dt>
18                <dd>nombre entre 0 et 2 (1 = saturation d'origine)</dd>
19                <dt>Exemple</dt>
20                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_saturer{1.2}\)\]"}</code></dd>
21        </dl>
22        <div class="apercu apercu_images">
23                <BOUCLE_imgsaturer(DATA){liste 0.0, 0.5, 1, 1.5, 2}>
24                [(#VALEUR|=={1}|oui)
25                <div class="apercu__item on">[<p>(#VALEUR) = originale</p>][(#GET{img})]</div>
26                ]
27                [(#VALEUR|=={1}|non)
28                <div class="apercu__item">[<p>(#VALEUR)</p>][(#GET{img}|image_saturer{#VALEUR})]</div>
29                ]
30                </BOUCLE_imgsaturer>
31        </div>
32</div>
33
34<hr>
35
36<!-- image_niveaux_gris_auto -->
37<div class="boite" id="image_niveaux_gris_auto">
38        <h2 class="boite__titre">image_niveaux_gris_auto</h2>
39        <p>
40                Corrige automatiquement les niveaux de gris d'une image.
41                <a href="http://www.paris-beyrouth.org/Corriger-les-niveaux-des-images">(Paris-Beyrouth : Corriger les niveaux des images</a>)
42        </p>
43        <dl class="codeblock">
44                <dt>Syntaxe</dt>
45                <dd><code>image_niveaux_gris_auto</code></dd>
46                <dt>Exemple</dt>
47                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_niveaux_gris_auto\)\]"}</code></dd>
48        </dl>
49        <div class="apercu apercu_images">
50                <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 1=75})]</div>
51                <div class="apercu__item"><p>niveaux_gris_auto</p>[(#GET{img}|image_courbe{rvb, 1=75}|image_niveaux_gris_auto)]</div>
52        </div>
53</div>
54
55[(#REM) ne semble pas marcher
56<hr>
57<!-- image_podpod -->
58<div class="boite" id="image_podpod">
59        <h2 class="boite__titre">image_podpod</h2>
60        <p>
61                Rempli par une couleur la plage de niveau de gris compris entre 2 Paramètres.
62                (<a href="http://www.paris-beyrouth.org/Creer-automatiquement-une">Paris-Beyrouth : Créer automatiquement une publicité podPod</a>)
63        </p>
64        <dl class="codeblock">
65                <dt>Syntaxe</dt>
66                <dd><code>image_podpod{c5e41d,150,200}</code></dd>
67                <dt>Paramètre1</dt>
68                <dd>Code hexadécimal</dd>
69                <dt>Paramètre2</dt>
70                <dd>Nombre entre 0 et 255 : borne basse de la plage de couleur</dd>
71                <dt>Paramètre3</dt>
72                <dd>Nombre entre 0 et 255 : borne haute de la plage de couleur</dd>
73                <dt>Exemple</dt>
74                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_podpod{c5e41d,150,200}\)\]"}</code></dd>
75        </dl>
76        <div class="apercu apercu_images">
77                <div class="apercu__item on"><p>originale</p>[(#GET{img}|balise_img)]</div>
78                <div class="apercu__item"><p>dd5500,100,255</p>[(#GET{img}|balise_img|image_podpod{000000,0,70})]</div>
79        </div>
80</div>
81]
82
83<hr>
84
85<!-- filtre couleur_courbe -->
86<div class="boite" id="image_courbe">
87        <h2 class="boite__titre">image_courbe</h2>
88        <p>
89                Modifie les courbes d'une image, en manipulant 1 ou 2 points de la courbe
90                <a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/modifier-les-courbes-d-une-image">(Paris-Beyrouth : Modifier les courbes d'une image)</a><br />
91        </p>
92        [<p>(#CHEMIN{images/courbes.png}|balise_img)</p>]
93        <dl class="codeblock">
94                <dt>Syntaxe</dt>
95                <dd><code>image_courbe{rvb, 80=30, 170=220}</code></dd>
96                <dt>Paramètre 1</dt>
97                <dd>rvb/r/v/b : couche(s) de couleur(s) affectée(s)</dd>
98                <dt>Paramètre 2</dt>
99                <dd>x=y : nombres de 0 à 255</dd>
100                <dt>Paramètre3</dt>
101                <dd>x=y : (optionnel) nombres de 0 à 255</dd>
102                <dt>Exemple</dt>
103                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=30, 170=220}\)\]"}</code></dd>
104        </dl>
105        <div class="apercu apercu_images">
106                <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div>
107                <BOUCLE_imgcourbe(DATA){source table, #LISTE{#ARRAY{param1,rvb, param2,80=30, param3,170=220}, #ARRAY{param1,rvb, param2,80=100, param3,170=150}, #ARRAY{param1,r, param2,130=40, param3,190=160}}}>
108                <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}, #VALEUR{param3}</p>[(#GET{img}|image_courbe{#VALEUR{param1},#VALEUR{param2},#VALEUR{param3}})]</div>
109                </BOUCLE_imgcourbe>
110        </div>
111</div>
112
113<hr>
114
115<!-- image_float -->
116<div class="boite" id="image_float">
117        <h2 class="boite__titre">image_float</h2>
118        <p>
119                Faire un texte qui épouse une image
120                <a href="http://www.paris-beyrouth.org/Un-habillage-irregulier-2">(Paris-Beyrouth :  Un habillage irrégulier</a>)<br />
121        </p>
122        <dl class="codeblock">
123                <dt>Syntaxe</dt>
124                <dd><code>image_float{left, 10, ffffff}</code></dd>
125                <dt>Paramètre 1</dt>
126                <dd>left/center/right : position de l'image</dd>
127                <dt>Paramètre 2</dt>
128                <dd>Nombre : marge en px autour de l'image</dd>
129                <dt>Paramètre3</dt>
130                <dd>Code hexadécimal : (optionnel) couleur de fond de l'image</dd>
131                <dt>Exemple</dt>
132                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5}\)\]"}</code></dd>
133        </dl>
134        <div class="texte float">
135        [(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5})]
136        <p>
137        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus utnunc eget ante ornare nonummy. Ut arcu. Duis tincidunt tincidunt quam. In elementum blandit odio. Nullam ultrices. Nulla sem augue, mollis id, vulputate eget, ullamcorper ultrices, purus. Aenean porttitor odio at mauris. Mauris quis enim vitae purus dictum ultricies.
138        </p>
139        <p>
140        Proin pharetra lectus auctor lacus. Quisque at sem ac lectus ornare vehicula. Nunc pulvinar, leo ut tristique auctor, felis diam gravida neque, consectetuer cursus sem
141        nisl ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Aliquam erat volutpat. Sed vel enim nec tellus suscipit imperdiet. Maecenas sagittis, dolor id tincidunt suscipit, orci tortor fermentum mi, id varius dolor nisi quis lectus. Quisque ante sem, molestie a, euismod sed, tempus sit amet, mauris. Integer vel ante eget urna sagittis consectetuer. Quisque ullamcorper convallis velit.
142        </p>
143        </div>
144</div>
145
146<hr>
147
148<!-- image_contour_alpha -->
149<div class="boite" id="image_contour_alpha">
150        <h2 class="boite__titre">image_contour_alpha</h2>
151        <p>
152                Trace le contour d'une image transparente (<a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/tracer-les-contours-de">Paris-Beyrout : Tracer les contours de transparence</a>)
153        </p>
154        <dl class="codeblock">
155                <dt>Syntaxe</dt>
156                <dd><code>image_contour_alpha{000000, 1}</code></dd>
157                <dt>Paramètre 1</dt>
158                <dd>Code hexadécimal : couleur du contour</dd>
159                <dt>Paramètre 2</dt>
160                <dd>Nombre : épaisseur du contour</dd>
161                <dt>Exemple</dt>
162                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_contour_alpha{000000, 1}\)\]"}</code></dd>
163        </dl>
164        <div class="apercu apercu_images">
165                <div class="apercu__item on alpha bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
166                <div class="apercu__item alpha bordure"><p>000000, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{000000, 2})]</div>
167                <div class="apercu__item alpha bordure"><p>9dba00, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{9dba00, 2})]</div>
168        </div>
169</div>
170
171<hr>
172
173<!-- image_sincity -->
174<div class="boite" id="image_sincity">
175        <h2 class="boite__titre">image_sincity</h2>
176        <p>
177                Effet automatique : saturation contrastée + accentuation du rouge
178                <a href="http://www.paris-beyrouth.org/Welcome-to-Spip-City">(Paris-Beyrouth : Welcome to Spip-City)</a>
179        </p>
180        <dl class="codeblock">
181                <dt>Syntaxe</dt>
182                <dd><code>image_sincity</code></dd>
183                <dt>Exemple</dt>
184                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_sincity\)\]"}</code></dd>
185        </dl>
186        <div class="apercu apercu_images">
187                <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 80=40})]</div>
188                <div class="apercu__item"><p>sincity</p>[(#GET{img}|image_courbe{rvb, 80=40}|image_sincity)]</div>
189        </div>
190</div>
191
192<hr>
193
194<!-- image_estampage_alpha -->
195<div class="boite" id="image_estampage_alpha">
196        <h2 class="boite__titre">image_estampage_alpha</h2>
197        <p>
198                Réalise des estampages
199                <a href="http://www.paris-beyrouth.org/Des-titres-en-relief">(Paris-Beyrouth : Des titres en relief)</a>
200        </p>
201        <dl class="codeblock">
202                <dt>Syntaxe</dt>
203                <dd><code>image_estampage_alpha{1,1}</code></dd>
204                <dt>Paramètre 1</dt>
205                <dd>Nombre : épaisseur en px</dd>
206                <dt>Paramètre 2</dt>
207                <dd>nombre : netteté</dd>
208                <dt>Exemple</dt>
209                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{1,1}\)\]"}</code></dd>
210        </dl>
211        <div class="apercu apercu_images">
212                <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
213                <BOUCLE_imgestampage(DATA){source table, #LISTE{#ARRAY{param1,1, param2,1}, #ARRAY{param1,1, param2,4}, #ARRAY{param1,4, param2,1}}}>
214                <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{#VALEUR{param1},#VALEUR{param2}})]</div>
215                </BOUCLE_imgestampage>
216        </div>
217</div>
218
219<hr>
220
221<!-- image_dispersion -->
222<div class="boite" id="image_dispersion">
223        <h2 class="boite__titre">image_dispersion</h2>
224        <p>
225                Réalise des dispersions, des floutages
226                <a href="http://www.paris-beyrouth.org/Un-filtre-de-dispersion-graphique">(Paris-Beyrouth : Un filtre de dispersion graphique</a>)
227        </p>
228        <dl class="codeblock">
229                <dt>Syntaxe</dt>
230                <dd><code>image_dispersion{url_image, 8, 8}</code></dd>
231                <dt>Paramètre 1</dt>
232                <dd>Url de l'image servant de filtre</dd>
233                <dt>Paramètre 2</dt>
234                <dd>Nombre : déplacement en x</dd>
235                <dt>Paramètre 3</dt>
236                <dd>Nombre : déplacement en y</dd>
237                <dt>Exemple</dt>
238                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8}\)\]"}</code></dd>
239        </dl>
240        <div class="apercu apercu_images">
241                <div class="apercu__item alpha on"><p>Image</p>[(#GET{img})]</div>
242                <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-noir.png}|balise_img)]</div>
243                <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8})]</div>
244        </div>
245        <div class="apercu apercu_images">
246                <div class="apercu__item alpha on"><p>Image 1</p>[(#GET{img})]</div>
247                <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-twirl.png}|balise_img)]</div>
248                <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-twirl.png},8,8})]</div>
249        </div>
250</div>
251
252<hr>
253
254<!-- image_merge -->
255<div class="boite" id="image_merge">
256        <h2 class="boite__titre">image_merge</h2>
257        <p>
258                Superpose une image sur une autre<br>
259        </p>
260        <p>
261                        <span class="warning">Le filtre <code>image_Masque</code> de Spip permet d'obtenir le même résultat, et propose plus d'options.</span>
262        </p>
263        <dl class="codeblock">
264                <dt>Syntaxe</dt>
265                <dd><code>image_merge{url_image, right, top}</code></dd>
266                <dt>Paramètre 1</dt>
267                <dd>left/center/right : position horizontal</dd>
268                <dt>Paramètre 2</dt>
269                <dd>top/middle/bottom : position verticale</dd>
270                <dt>Exemple</dt>
271                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle}\)\]"}</code></dd>
272        </dl>
273        <div class="apercu apercu_images">
274                <div class="apercu__item on bordure"><p>image 1</p>[(#CHEMIN{images/quadrillage.png}|balise_img)]</div>
275                <div class="apercu__item alpha on"><p>image 2</p>[(#CHEMIN{images/cercle.png}|balise_img)]</div>
276                <div class="apercu__item bordure"><p>center, middle</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle})]</div>
277                <div class="apercu__item bordure"><p>left, bottom</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},left,bottom})]</div>
278        </div>
279</div>
280
281
282<!-- image_negatif -->
283<div class="boite" id="image_negatif">
284        <h2 class="boite__titre">image_negatif</h2>
285        <p>
286                Passe une image en négatif
287        </p>
288        <p>
289                <span class="warning">Le filtre <code class="Exemple">image_courbe{rvb, 0=255, 255=0}</code> produira le même résultat</span>
290        </p>
291        <dl class="codeblock">
292                <dt>Syntaxe</dt>
293                <dd><code>image_negatif</code></dd>
294                <dt>Exemple</dt>
295                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_negatif\)\]"}</code></dd>
296        </dl>
297        <div class="apercu apercu_images">
298                <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div>
299                <div class="apercu__item"><p>image_negatif</p>[(#GET{img}|image_negatif)]</div>
300        </div>
301</div>
302
303<!-- image_tramer -->
304<div class="boite" id="image_tramer">
305        <h2 class="boite__titre">image_tramer</h2>
306        <p>
307                Tramer une image (en mode niveaux de gris) à la <a href="https://github.com/lowtechmag/solar/wiki/Solar-Web-Design#dithered-images">LOW←TECH MAGAZINE</a>
308        </p>
309        <dl class="codeblock">
310                <dt>Syntaxe</dt>
311                <dd><code>image_tramer{url_image, 6, o8x8}</code></dd>
312                <dt>Paramètre 1</dt>
313                <dd>Url de l'image servant de filtre</dd>
314                <dt>Paramètre 2</dt>
315                <dd>Nombre : niveaux de couleurs à utiliser</dd>
316                <dt>Paramètre 3</dt>
317                <dd>Booléen : générer une image en couleurs</dd>
318                <dt>Exemple</dt>
319                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_tramer\)\]"}</code></dd>
320        </dl>
321        <div class="apercu apercu_images">
322                <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
323                <BOUCLE_imgtramer1(DATA){liste 3,6,11}>
324                <div class="apercu__item"><p>#VALEUR</p>[(#CHEMIN{images/ecureuil.jpg}|image_tramer{#VALEUR})]</div>
325                </BOUCLE_imgtramer1>
326        </div>
327        <div class="apercu apercu_images">
328                <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
329                <BOUCLE_imgtramer2(DATA){liste checks,o8x8,h8x8a,h16x16o,c5x5b,c5x5w,c6x6b,c6x6w,c7x7b,c7x7w}>
330                <div class="apercu__item"><p>6,#VALEUR</p>[(#CHEMIN{images/ecureuil.jpg}|image_tramer{6,#VALEUR})]</div>
331                </BOUCLE_imgtramer2>
332        </div>
333                <div class="apercu apercu_images">
334                <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
335                <BOUCLE_imgtramer3(DATA){liste 3,6,11}>
336                <div class="apercu__item"><p>#VALEUR,o8x8,oui</p>[(#CHEMIN{images/ecureuil.jpg}|image_tramer{#VALEUR,o8x8,oui})]</div>
337                </BOUCLE_imgtramer3>
338        </div>
339</div>
Note: See TracBrowser for help on using the repository browser.