<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//pt_BR"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="lfparser_2.17"> <META NAME="LFCATEGORY" CONTENT="Graphics"> <!-- this is used be a number of tools: =LF=AUTHOR: Katja Socher =LF=CAT___: Graphics =LF=TITLE_: Faça magia com imagens na Shell =LF=NUMBER: 211 =LF=ANAME_: article211.shtml --> <TITLE>lf211, Graphics: Faça magia com imagens na Shell</TITLE> <!-- stylesheet added by lfparser: --> <style type="text/css"> <!-- td.top {font-family: Arial,Geneva,Verdana,Helvetica,sans-serif; font-size:12 } pre { font-familiy:monospace,Courier } p.cl { color:#EE9500 } a.nodec { text-decoration:none } p.trans { font-size:8pt; text-align:right } p.clbox { width:50%; alignment:center; background-color:#FFD700; border-style:none; border-width:medium; border-color:#FFD700; padding:0.5cm ; text-align:center } p.foot { background-color:#AAAAAA; color:#FFFFFF; border-style:none; border-width:medium; border-color:#AAAAAA; padding:0.5cm ; margin-top:0.1cm; margin-right:1cm; margin-left:1cm; text-align:center } --> </style> </HEAD> <BODY bgcolor="#ffffff" text="#000000"> <!-- this is generated html code. NEVER use this file for your translation work. Instead get the file with the same article number and .meta.shtml in its name. Translate this meta file and then use lfparser program to generate the final article --> <!-- lfparser can be obtained from http://www.linuxfocus.org/~guido/dev/lfparser.html --> <!-- 2pdaIgnoreStart --> <!-- start navegation bar --> <!-- top navegation bar --> <TABLE cellspacing="0" cellpadding="0" border="0" align="center" width="90%"> <TR bgcolor="#2e2292"> <TD class="top"><TABLE cellspacing="0" cellpadding="0" border="0" width= "100%"> <TR><TD width="144"><IMG src="../../common/images/logolftop.gif" alt="[LinuxFocus-icon]" width="350" height="45" align="left" border="0"></TD> <TD class="top"> <TABLE width="100%"> <TR align="right"> <TD class="top"><A class="nodec" href="../index.shtml"><FONT color= "#DDDDDD">Início</FONT></A> | <A class= "nodec" href="../map.html"><FONT color= "#DDDDDD">Mapa</FONT></A> | <A class= "nodec" href="../indice.html"><FONT color= "#DDDDDD">Índice</FONT></A> | <A class="nodec" href="../Search/index.shtml"><FONT color= "#DDDDDD">Procura</FONT></A> </TD> </TR> <TR align="right"> <TD class="top"> <HR width="100%" noshade size="1"> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> <!-- end top navegation bar --> <!-- blue bar --> <TABLE cellspacing="0" cellpadding="0" border="0" align="center" width="90%"> <TR bgcolor="#00ffff"> <TD><IMG src="../../common/images/transpix.gif" width="1" height= "2" alt=""></TD> </TR> </TABLE> <!-- end blue bar --> <!-- bottom navegation bar --> <TABLE cellspacing="0" cellpadding="0" border="0" align="center" width="94%"> <TR bgcolor="#000000"> <TD> <TABLE cellspacing="0" cellpadding="1" border="0" width= "100%"> <TR align="center"> <TD><A class="nodec" href="../News/index.shtml"><FONT color= "#FFFFFF">Novidades</FONT></A> </TD> <TD><FONT color="#FFFFFF">|</FONT> </TD> <TD><A class="nodec" href="../Archives/index.html"><FONT color= "#FFFFFF">Arquivos</FONT></A> </TD> <TD><FONT color="#FFFFFF">|</FONT> </TD> <TD><A class="nodec" href="../Links/index.shtml"><FONT color= "#FFFFFF">Links</FONT></A> </TD> <TD><FONT color="#FFFFFF">|</FONT> </TD> <TD><A class="nodec" href="../aboutus.html"><FONT color= "#FFFFFF">Sobre LF</FONT></A> </TD> </TR> </TABLE> </TD> </TR> </TABLE> <!-- end bottom navegation bar --> <!-- stop navegation bar --> <!-- SSI_INFO --> <!-- tr_staticssi include virtual --> <!-- tr_staticssi exec cmd --> <!-- addedByLfdynahead ver 1.1 --><TABLE ALIGN="right" border=0><TR><TD ALIGN="right"><FONT SIZE="-1" FACE="Arial,Helvetica">Este artigo está disponível em: <A href="../../English/July2001/article211.shtml">English</a> <A href="../../Castellano/July2001/article211.shtml">Castellano</a> <A href="../../Deutsch/July2001/article211.shtml">Deutsch</a> <A href="../../Francais/July2001/article211.shtml">Francais</a> <A href="../../Nederlands/July2001/article211.shtml">Nederlands</a> <A href="../../Portugues/July2001/article211.shtml">Portugues</a> <A href="../../Russian/July2001/article211.shtml">Russian</a> <A href="../../Turkce/July2001/article211.shtml">Turkce</a> </FONT></TD></TR></TABLE><br> <!-- 2pdaIgnoreStop --> <!-- SHORT BIO ABOUT THE AUTHOR --> <TABLE ALIGN=LEFT BORDER=0 hspace=4 vspace=4 WIDTH="30%" > <TR> <TD> <!-- 2pdaIgnoreStart --> <!-- PALM DOC --> <TABLE BORDER=0 hspace=4 vspace=4> <TR> <TD> <font size=1> <img src="../../common/images/2doc.gif" width=34 align=left border=0 height=22 alt="convert to palm"><a href="http://cgi.linuxfocus.org/cgi-bin/2ztxt">Convert to GutenPalm</a><br>or <a href="http://cgi.linuxfocus.org/cgi-bin/2pda">to PalmDoc</a></font> </TD> </TR> </TABLE> <!-- END PALM DOC --> <!-- 2pdaIgnoreStop --> <br> <IMG src="../../common/images/katjasocher.gif" alt= "[Photo of the Author]" height="148" width="120"> <BR>por <A href="mailto:katja@linuxfocusorg">Katja Socher</A> <BR><BR> <I>Sobre o autor:</I><BR> <P>A Katja é a editora alemã da LinuxFocus. Ela gosta do Tux, filme & fotografia e do mar. A sua página pessoal pode ser encontrada <A href= "http://www.toppoint.de/~utuxfan/k/">aqui</A>.</P> <BR><i>Conteúdo</i>: <UL> <LI><A HREF="#211lfindex0">Fazendo Magia</A></LI> <LI><A HREF="#211lfindex1">Os ingredientes de base</A></LI> <LI><A HREF="#211lfindex2">Alguns Truques</A></LI> <LI><A HREF="#211lfindex3">Alterando a altura e o comprimento das suas imagens</A></LI> <LI><A HREF="#211lfindex4">Criando vistas das imagens</A></LI> <LI><A HREF="#211lfindex5">Alterando o formato da imagem</A></LI> <LI><A HREF="#211lfindex6">Pondo um logo em todas as suas imagens</A></LI> <LI><A HREF="#211lfindex7">Obtendo informação das propriedades das imagens</A></LI> <LI><A HREF="#211lfindex8">Referências</A></LI> <LI><A HREF="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=211&lang=pt">Forma de respostas para este artigo</A></LI> </UL> </TD></TR></TABLE> <!-- HEAD OF THE ARTICLE --> <br> <H2>Faça magia com imagens na Shell</H2> <IMG src="../../common/images/illustration211.jpg" alt= "[Illustration]" hspace="40" width="190" height="205"> <!-- ABSTRACT OF THE ARTICLE --> <P><i>Abstrato</i>: <P> Neste artigo veremos alguns truques que os "experts" do ImageMagick conseguem fazer utilizando uma colecção de utilitários gráficos como os ingredientes de base e a linha de comandos como a varinha mágica. </P> <HR size="2" noshade align="right"><BR> <!-- BODY OF THE ARTICLE --> <A NAME="211lfindex0"> </A> <H2>Fazendo Magia</H2> <P>Nos velhos tempos os "experts" tomavam os seus ingredientes de base, misturavam-nos num grande pote, agitando a sua varinha mágica e murmuravam as suas palavras mágicas... e de repente alguém era transformado em sapo. Nos nossos tempos modernos os "experts" são como toda a gente na sociedade altamente especializada e os seus livros de truques só contêm alguns truques úteis para tarefas muito especificas. Então o ImageMagick não é nenhum livro de truques para uso geral. Em muitos aspectos não consegue competir com o Gimp ou muitos outros programas gráficos mas possui especificaç�es que são muito úteis. <BR> A sua força real reside na possibilidade de automatizar um monte dos seus processos ao trabalhar em conjunto com a shell.<BR> <BR> Mas antes de divulgarmos alguns truques demos uma vista rápida pelos seus ingredientes de base primeiro:</P> <A NAME="211lfindex1"> </A> <H2>Os ingredientes de base</H2> <P>ou O que é o ImageMagick?</P> O ImageMagick é uma colecção de utilitários gráficos para trabalhar com imagens. Os utilitários são apresentação, importação, montagem, conversão, "mogrify", identificação e combinação.<BR> <B>Display</B>: Se digitar "display &" uma janela de apresentação aparecerá e poderá trabalhar directamente na imagem. Através do menu pode abrir um ficheiro, guardar ou apagá-lo, translar ou rotacioná-lo, alteara a cor ou aplicar certos efeitos, e.g. implosão / explosão ("implode") enrelevando ("emboss") a figura ou por uma moldura à sua volta e mais.<BR> Com o <B>Import</B> pode tirar "fotografias" do ecrã inteiro ou de certas imagens ou janelas.<BR> <B>Animate</B> é um utilitário de animação. Pode seleccionar uma serie de imagens para serem apresentadas uma após a outra ou pode ver um gif animado com.<BR> Com <B>Montage</B> você pode e.g. criar uma imagem telhada ou obter uma imagem onde pode ver todas as imagens simples que comp�em um gif animado.<BR> <B>Convert</B> é um utilitário muito poderoso. Pode converter uma imagem noutro formato e.g. uma imagem gif numa imagem jpg ou o inverso, pode alterar o tamanho de uma imagem e aplicar também imensos efeitos, e.g. efeito nas imagens de "characoal".<BR> <B>Mogrify</B> é muito semelhante ao convert com uma grande diferença, é que o mogrify escreve por cima da imagem corrente enquanto com o convert e outros utilitários você tem de especificar um ficheiro onde a imagem alterada é salva. Por isso eu quase não a uso.<BR> <B>Identify</B> dá-lhe informação acerca da imagem como a sua geometria, nome, formatação, etc.<BR> <B>Combine</B> combina duas ou mais imagens numa outra imagem. Você pode, por exemplo, meter um logo em cada imagem.<BR> <BR> Para utilizar os utilitários digita o nome do utilitário, seguido da opção que pretende usar, a imagem que é para ser manipulada e o nome do ficheiro onde pretende guardar as alteraç�es feitas à imagem.<BR> E.g. se você pretende transformar o tux1.gif em "characoal" com um factor 3 e guardá-lo no tux1characoal.gif você escreverá:<BR> convert -characoal 3 tux1.gif tux1characoal.gif<BR> <BR> Após esta vista de olhos pelos ingredientes de base vejamos alguns truques: <A NAME="211lfindex2"> </A> <H2>Alguns Truques</H2> <A NAME="211lfindex3"> </A> <H2>Alterando a altura e o comprimento das suas imagens</H2> Imagine que você possui uma pilha de imagens com as últimas vitimas que você transformou em sapo e pretende pô-las na sua página web. No sentido de reduzir o tempo de carregamento você quer tornar as suas imagens mais pequenas.<BR> Com o utilitário convert você pode tornar as suas imagens maiores ou mais pequenas ou criar um índice com amostras ("thumbnails").<BR> O comando <PRE> convert -geometry 60x80 image.gif out.gif </PRE> redimensiona a imagem image.gif para um comprimento de 60 e uma altura de 80 e escreve a imagem resultante em out.gif. <BR> <BR> Para dar a todas as nossas imagens e.g. uma altura e um comprimento de 80 de um só modo você escreverá: <PRE> #!/bin/sh for f in $* ;do convert -geometry 80x80 $f t_$f echo "<a href=\"$f\"><img src=\"t_$f\" width=\"80\" height=\"80\"></a>" done # end of script </PRE> (Edite estas linhas com o editor de texto da sua preferência (vi, emacs, nedit, kedit...) e salve com o nome mksmallimage no directório pessoal. Vá depois para a linha de comandos bash e digite <PRE> chmod 755 /home/katja/mksmallimage </PRE> (utilize o nome do seu directório pessoal em vez de katja) Depois pode utilizar a script digitando home/katja/mksmallimage xxx.jpg *.gif convertendo todas os ficheiros gif e o ficheiros xxx.jpg.) <A NAME="211lfindex4"> </A> <H2>Criando vistas das imagens</H2> Você tem um CD com uma colecção de todas as pessoas que transformou em sapos no último par de anos. Agora o seu rival "expert" que tem ciúmes de si quer a prova em como tornou o seu cão num sapo. E você passou o dia inteiro à procura daquela foto. Isto podia ter sido evitado se você tivesse uma vista de imagem com todas as imagens do seu CD. Com o ImageMagick é muito fácil de criar uma: <PRE> display "vid:*.jpg" </PRE> Isto gerará uma imagem visual com todas as imagens jpg do directório corrente. Ou: <PRE> display "vid:frog/*" </PRE> gerará uma imagem visual com todas as imagens no directório frog.<BR> Com o botão direito numa das imagens obtém um menu onde pode seleccionar "Load" para ver a imagem no seu tamanho real.<BR> <BR> <CENTER> <IMG src="../../common/images/article211/dir.jpg" width="292" height="147" alt="[visual image directory]"> </CENTER> <BR> <BR> Isto é um modo muito fácil de criar uma vista de imagem mas dependendo do seu computador pode levar algum tempo para a imagem visual do directório ser gerada e consome imensa memória se tiver muitas imagens. Assim escreveremos uma pequena script htmlthumbnails que é agora menos exigente a este respeito e depois construímos uma página web onde pode clicar em alguma amostra para obter a imagem original.<BR> <BR> O código html para isto é parecido com o que se segue: <PRE> <a href="file.gif"><img src="t_file.gif" width="60" height="80"></a> </PRE> O ficheiro original onde está file.gif e a amostra é t_file.gif. <BR> Agora escreveremos uma script que gerará as amostras e escreve o código html para nós. <PRE> for f in $* ;do convert -geometry 80x80 $f t_$f echo "<a href=\"$f\"><img src=\"t_$f\" width=\"80\" height=\"80\">" done </PRE> A script acima percorrerá todas as imagens especificadas na linha de comandos, gerará as amostras e escreverá o código html no ecrã. Podemos, depois, copiar e colar o código html para a nossa página web.<BR> Para uma script completa adicionámos algum texto de ajuda e verificação de erros. Aqui está a nossa script final. chamada htmlthumbnails : <BR> <A href= "../../common/src/article211/htmlthumbnails.html">htmlthumbnails (html para ver)</A>, <A href= "../../common/src/article211/htmlthumbnails.txt">htmlthumbnails (texto para download)</A> <BR> <A NAME="211lfindex5"> </A> <H2>Alterando o formato da imagem</H2> O Convert pode não só alterar o tamanho bem como o formato. E.g. pode alterar uma imagem gif numa jpg ou o inverso. O comando para fazer isto é simplesmente: <PRE> convert image.gif image.jpg </PRE> O Convert sabe pela extensão do ficheiro o formato a utilizar.<BR> Para alterar muitas imagens do formato jpg para o gif utilize:<BR> <PRE> for f in $* ;do if echo "$f" | grep -i "jpg$" > /dev/null ; then gif=`echo "$f" | sed 's/jpg$/gif/i'` echo "converting $f to $gif ..." convert 80x80 $f $gif else echo echo "$f is not a jpg file, ignored" fi done </PRE> Existe, ainda um número considerável de outros formatos que o ImageMagick conhece também. <A NAME="211lfindex6"> </A> <H2>Pondo um logo em todas as suas imagens</H2> Gostaríamos de adicionar um pequeno logo como aquele que consegue ver à direita a um número de imagens. <IMG src="../../common/images/article211/lfstamp.gif" width="71" height="22" alt="[linuxfocus stamp]" align="right" border="2"> <BR> <BR> Este logo deve ser uma imagem gif pequena e transparente. O nosso logo devia ser colocado como uma pequena assinatura no canto direito mais baixo na imagem final, como pode ver na seguinte imagem Tux: <CENTER> <BR> <IMG src="../../common/images/article211/stamp_tux002.jpg" width="240" height="180" alt="[tux with logo]"> </CENTER> <BR> Qual é o comando para fazer isto?<BR> O utilitário combine pode ser usado para combinar 2 imagens numa nova. Várias opç�es dizem ao programa como fazê-lo: <PRE> combine -gravity SouthEast -compose Over img.jpg logo.gif stamp_img.jpg </PRE> A opção "gravity SouthEast" p�es o logo.gif no canto direito mais baixo. A opção "compose Over" diz que substituirá a imagem pelo logo nos sítios que se sobrep�em.<BR> <BR> Para obter uma script totalmente funcional introduzimos um ciclo e de novo adicionámos algum texto de ajuda e verificação de erros. Eis aqui a nossa versão final da script, chamada stampimages :<BR> <A href="../../common/src/article211/stampimages.html">stampimages (html para ver)</A>, <A href= "../../common/src/article211/stampimages.txt">stampimages (texto para download)</A> <BR> <A NAME="211lfindex7"> </A> <H2>Obtendo informação das propriedades das imagens</H2> O Identify apresenta detalhes acerca do tipo das suas imagens, o seu tamanho e geometria. Parecido com o que se segue: <PRE> identify image.jpg results in image.jpg 340x254 DirectClass 13939b JPEG 0.1u 0:01 </PRE> Que pode o nosso "expert" fazer com? Bem, para desenhar boas páginas web que apresentaram imagens enquanto a página está a carregar você devia especificar a geometria exacta de todas as imagens. O código html é parecido com isto: <PRE> <img src="image.jpg" width="340" height="254" alt="[sample picture]"> </PRE> Quando as nossas imagens têm diferentes tamanhos e não sabemos a altura e comprimento exactos de cada uma podemos utilizar o identify para nos ajudar. Nós escrevemos uma script que lerá a saída do "identify" e imprimirá esta linha depois. A geometria da imagem é o segundo parâmetro na string de saída do programa identify. Para obtermos este parâmetro usamos o comando awk: <PRE> identify image.jpg | awk '{print $2}' results in 340x254 </PRE> Agora temos de separar a geometria em altura e comprimento. Isto pode ser feito com: <PRE> echo 340x254 | sed 's/[^0-9]/ /g' | awk '{print $1}' </PRE> a qual dá o comprimento. A altura pode ser obtida com: <PRE> echo 340x254 | sed 's/[^0-9]/ /g' | awk '{print $2}' </PRE> Não foque demasiado nos comandos exactos da shell. Se não os entende completamente ainda aceite-os como dados. Haverá um artigo acerca da programação da shell na próxima edição de LinuxFocus onde será explicada toda a sua magia. A script final é algo parecido com o que se segue: <PRE> file=$1 geometry=`identify $file | awk '{print $2}'` # geometry can be 563x144+0+0 or 75x98 # we need to get rid of the plus (+) and the x characters: width=`echo $geometry | sed 's/[^0-9]/ /g' | awk '{print $1}'` height=`echo $geometry | sed 's/[^0-9]/ /g' | awk '{print $2}'` echo "<img src=\"$file\" width=\"$width\" height=\"$height\">" </PRE> Para obter uma script completa nós adicionámos texto de ajuda e verificação de erros. Aqui está a nossa versão final da script, chamada imgsrcline : <BR> <A href="../../common/src/article211/imgsrcline.html">imgsrcline (html para ver)</A>, <A href= "../../common/src/article211/imgsrcline.txt">imgsrcline (texto para download)</A> <BR> <BR> <BR> <p>Ao trabalhar com o ImageMagick descobri, por vezes, discrepâncias entre a documentação e a funcionalidade actual. Algumas especificaç�es não são muito estáveis. Contudo se se restringir às coisas demonstradas acima verá que são úteis. As funç�es listadas acima trabalham. Eu usei o ImageMagick-4.2.9, o ImageMagick-5.2.9 e o ImageMagick-5.3.0 e as coisas aprendidas aqui trabalham em todas estas vers�es. <P>Espero que fique com a ideia do que pode fazer com o ImageMagick e utilize as scripts ou até mesmo a criar os seus próprios truques de magia.<BR> Divirta-se!</P> <A NAME="211lfindex8"> </A> <H2>Referências</H2> <UL> <LI>Instalação: Provavelmente o ImageMagick já está instalado no seu sistema pois está incluído na maioria das distribuiç�es Linux. Mas no caso de pretender uma versão mais recente pode fazer download a partir de: <a href="http://www.imagemagick.org/">http://www.imagemagick.org/</a></LI> <LI>Para mais informação acerca dos utilitários do ImageMagick você pode consultar as páginas man (e.g. digite man convert para encontrar mais sobre o utilitário convert) ou leia o mesmo texto na página web.</LI> <LI>Se não está familiar com a programação da shell ainda, deixe o google pesquisar por bash e deve encontrar vários tutoriais acerca da programação da shell que servirão para as suas necessidades. Ou pode esperar pela próxima edição da LinuxFocus e ler o artigo acerca da Programação da Shell.</LI> </UL> <!-- 2pdaIgnoreStart --> <A NAME="talkback"> </a> <h2>Forma de respostas para este artigo</h2> Todo artigo tem sua própria página de respostas. Nesta página você pode enviar um comentário ou ver os comentários de outros leitores: <center> <table border="0" CELLSPACING="2" CELLPADDING="1"> <tr BGCOLOR="#C2C2C2"><td align=center> <table border="3" CELLSPACING="2" CELLPADDING="1"> <tr BGCOLOR="#C2C2C2"><td align=center> <A href="http://cgi.linuxfocus.org/cgi-bin/lftalkback?anum=211&lang=pt"><b> página de respostas </b></a> </td></tr></table> </td></tr></table> </center> <HR size="2" noshade> <!-- ARTICLE FOOT --> <CENTER><TABLE WIDTH="95%"> <TR><TD ALIGN=CENTER BGCOLOR="#9999AA"> <A HREF="../../common/lfteam.html">Páginas Web mantidas pelo time de Editores LinuxFocus</A> <BR><FONT COLOR="#FFFFFF">© Katja Socher, <a href="../../common/copy.html">FDL</a> <BR><a href="http://www.linuxfocus.org">LinuxFocus.org</a></FONT> <BR><a href="http://cgi.linuxfocus.org/cgi-bin/lfcomment?lang=pt&article=article211.shtml" target="_TOP">Clique aqui para reportar uma falha ou para enviar um comentário para LinuxFocus</A><BR></TD> <TD BGCOLOR="#9999AA"><!-- TRANSLATION INFO --> <font size=2>Informação sobre tradução:</font><TABLE> <tr><td><font size=2>en</font></td> <td><font size=2>-></font></td> <td><font size=2>--</font></td> <td><font size=2><a href="mailto:katja@linuxfocusorg"><FONT COLOR="#FFFFFF">Katja Socher</FONT></a></font></td> </tr> <tr><td><font size=2>en</font></td> <td><font size=2>-></font></td> <td><font size=2>pt</font></td> <td><font size=2><a href="mailto:bruno@linuxfocusorg"><FONT COLOR="#FFFFFF">Bruno Sousa</FONT></a></font></td> </tr> </TABLE></TD> </TR></TABLE></CENTER> <p><font size=1>2001-08-30, generated by lfparser version 2.17</font></p> <!-- 2pdaIgnoreStop --> </BODY> </HTML>