Manipulando imagens

Publicado em: 18/03/2008

Introduo Neste artigo veremos como manipular imagens, escrever sobre elas e criar thumbnails de forma simples utilizando os recursos do framework. Preparando Na pgina Default.aspx v na Toolbox e na aba Standart e adicione os componentes FileUpload e LinkButton. Nas propriedades do LinkButton mude o Text para "Enviar".

Figura 01. Exemplo.

Salvando e criando thumbnail De um clique duplo sobre o LinkButton que assim ir para a parte onde iremos criar o cdigo. Para salvar a imagem basta apenas adicionarmos: FileUpload1.SaveAs("caminho_e_nome"), nesse caso para facilitar, vamos criar uma string para o caminho e nome do arquivo. Ento a ao ficar como na Listagem 01. string arquivo = Server.MapPath(FileUpload1.FileName); FileUpload1.SaveAs(arquivo);
Listagem 01. Salvando arquivo

Agora que enviamos a imagem podemos abri-la e trabalhar com o ela o que for necessrio, na parte superior desta pgina adicione: using System.Drawing.Imaging; timo, j enviamos a imagem agora vamos criar a thumbnail, o primeiro passo ser abrir a imagem enviada: System.Drawing.Image abre_imagem = System.Drawing.Image.FromFile(arquivo); //Abre foto Agora que ela est aberta podemos ver muitos dados dela, mas no momento s no interessa ver a altura e largura, para calcular a nova altura e largura proporcionalmente. Eu gosto de criar as thumbnails com a mesma altura ento nesse caso vou deixar a altura mxima com 70px e a largura calcularemos em funo disso, para fazer isso adicione a seguinte linha: int largura = abre_imagem.Width * 70 / abre_imagem.Height; // calcula largura em proporo O prximo passo ser adicionar os cdigos conforme a Listagem 02 System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback); System.Drawing.Image thumbNailImg = abre_imagem.GetThumbnailImage(largura, 70, dummyCallBack, IntPtr.Zero); //dados dentro dos parenteses: largura, altura... //onde est "thumbnail.jpg" mude para o nome desejad para a thumbnail thumbNailImg.Save(Server.MapPath("thumbnail.jpg")); //fechando conexoes thumbNailImg.Dispose(); abre_imagem.Dispose();

Listagem 02. Trabalhando thumbnail

Para facilitar as explicaes sobre a Listagem 02 eu adicionei nela alguns comentrios, que facilitaro a compreeno. Est quase tudo pronto, agora s falta adicionarmos a funo para callback. Voc ir adicion-la fora da funo LinkButton1_Click, o cdigo completo de sua pgina ficar semelhante a Listagem 03:

using using using using using using using using using using

System.Drawing.Imaging; System; System.Data; System.Configuration; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void LinkButton1_Click(object sender, EventArgs e) { string arquivo = Server.MapPath(FileUpload1.FileName); FileUpload1.SaveAs(arquivo); //Abre foto System.Drawing.Image abre_imagem = System.Drawing.Image.FromFile(arquivo); // calcula largura em proporo int largura = abre_imagem.Width * 70 / abre_imagem.Height; System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback); System.Drawing.Image thumbNailImg = abre_imagem.GetThumbnailImage(largura, 70, dummyCallBack, IntPtr.Zero); //dados dentro dos parenteses: largura, altura... thumbNailImg.Save(Server.MapPath("thumbnail.jpg")); //salva thumbnail //fechando conexoes thumbNailImg.Dispose(); abre_imagem.Dispose(); } public bool ThumbnailCallback() { return false; } }
Listagem 03. Pgina completa.

Escrevendo sobre imagens Para escrever sobre a imagem simples, adicione na parte superior de sua pgina: using System.Drawing; using System.Drawing.Drawing2D; Para facilitar o entendimento, abaixo irei mostrar o cdigo completo e coment-lo. O cdigo dever ser adicionado depois da linha onde fechamos os objetos na criao das thumbnails. Bitmap bmp = new Bitmap(arquivo); //Criando bitmap do arquivo Graphics g = Graphics.FromImage(bmp); //Criando grfico do arquivo Rectangle treta = new Rectangle(0, bmp.Height / 2, bmp.Width, bmp.Height); //criando retangulo, os dados so na seguinte ordem: //onde comea o texto(coloquei zero pois mando alinha ao centro na funo abaixo), //altura do texto(coloquei no centro da imagem), //largura do retangulo(a mesma largura da imagem),

//altura do retangulo(a mesma altura da imagem) StringFormat sf = new StringFormat(); sf.Alignment = StringAlignment.Center; //mandando o texto se alinhar ao centro //Aqui vai o juntar o retangulo no Bitmap e escrever //sobre o retangulo, e formatar o texto g.DrawString("Seu texto", new Font("tahoma",12), Brushes.White, treta, sf); //salvando imagem, altere para o nome desejado bmp.Save(Server.MapPath("imagem_escrito.jpg")); //Fechando conexes sf.Dispose(); bmp.Dispose(); g.Dispose();
Listagem 04. Escrevendo sobre imagens.

Pronto! Est tudo certo, pode rodar seu aplicativo e test-lo. Concluso Como vimos neste artigo, manipular imagens no nenhum bicho de sete cabeas, desde que seja feita de uma forma bem organizada. Com os mesmos conceitos do que vimos hoje podemos, facilmente, fazer diversas coisas com imagens, como por exemplo, adicionar tarjas sobre as imagens, adicionar imagens sobre outras imagens, adicionar sombra no texto sobre a imagem e etc. Espero ter ajudado e qualquer dvida poste abaixo.

Autor: Gabriel dos Santos Potumati