Manipulando imagens

Manipulando imagens

Introdução

Neste artigo veremos como manipular imagens, escrever sobre elas e criar thumbnails de forma simples utilizando os recursos do framework.

Preparando

Na página 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 código.

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. Então a ação 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 necessário, na parte superior desta página 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 então nesse caso vou deixar a altura máxima com 70px e a largura calcularemos em função disso, para fazer isso adicione a seguinte linha:

int largura = abre_imagem.Width * 70 / abre_imagem.Height; // calcula largura em proporção

O próximo passo será adicionar os códigos 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...

thumbNailImg.Save(Server.MapPath("thumbnail.jpg")); //onde está “thumbnail.jpg” mude para o nome desejad para a thumbnail

//fechando conexoes

thumbNailImg.Dispose();
abre_imagem.Dispose();

Listagem 02. Trabalhando thumbnail

Para facilitar as explicações sobre a Listagem 02 eu adicionei nela alguns comentários, que facilitarão a compreenção.

Está quase tudo pronto, agora só falta adicionarmos a função para callback. Você irá adicioná-la fora da função LinkButton1_Click, o código completo de sua página ficará semelhante a Listagem 03:

using System.Drawing.Imaging;

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using 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);

        System.Drawing.Image abre_imagem = System.Drawing.Image.FromFile(arquivo); //Abre foto

        int largura = abre_imagem.Width * 70 / abre_imagem.Height; // calcula largura em proporção

        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. Página completa.

Escrevendo sobre imagens

Para escrever sobre a imagem é simples, adicione na parte superior de sua página:
using System.Drawing;

using System.Drawing.Drawing2D;

Para facilitar o entendimento, abaixo irei mostrar o código completo e comentá-lo. O código deverá ser adicionado depois da linha onde fechamos os objetos na criação das thumbnails.

        Bitmap bmp = new Bitmap(arquivo); //Criando bitmap do arquivo

        Graphics g = Graphics.FromImage(bmp); //Criando gráfico do arquivo

        Rectangle treta = new Rectangle(0, bmp.Height / 2, bmp.Width, bmp.Height); //criando retangulo, os dados são na seguinte ordem:

        //onde começa o texto(coloquei zero pois mando alinha ao centro na função 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

        g.DrawString("Seu texto", new Font("tahoma",12), Brushes.White, treta, sf); //Aqui vai o juntar o retangulo no Bitmap e escrever sobre o retangulo, e formatar o texto

        bmp.Save(Server.MapPath("imagem_escrito.jpg")); //salvando imagem, altere para o nome desejado

        //Fechando conexões

        sf.Dispose();

        bmp.Dispose();

        g.Dispose();

Listagem 04. Escrevendo sobre imagens.

Pronto! Está tudo certo, pode rodar seu aplicativo e testá-lo.

Conclusão

Como vimos neste artigo, manipular imagens não é nenhum bicho de sete cabeças, 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 dúvida poste abaixo.