Editar imagem com ASP.NET e Ajax

Boa tarde!
Bom, neste post eu falarei um pouco sobre como manipular imagens. O código que realmente interessa é basicamente C#, e pode ser utilizado tanto em windows forms quanto em asp.net. O exemplo aqui será em asp.net 4.0, mas nada impede que seja utilizado em windows forms. Eu disponibilizarei o projeto no github. Basta acessar o link: https://github.com/ceb10n/exemplo-image-write.

Agora vamos ao que interessa.

Crie um novo projeto web e vamos começar. Vamos adicionar o ScriptManager e um UpdatePanel

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="exemplo_image_write._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            </ContentTemplate>
        </asp:UpdatePanel>   
</asp:Content>

Agora vamos adicionar alguns TextBox para inserir texto e um Button para atualizar a imagem:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="primeiraLinha" runat="server" /><br />
                <asp:TextBox ID="segundaLinha" runat="server" /><br />
                <asp:TextBox ID="terceiraLinha" runat="server" /><br />
                <asp:TextBox ID="quartaLinha" runat="server" /><br />
                <asp:TextBox ID="quintaLinha" runat="server" /><br />
                <asp:Button ID="atualizarButton" Text="atualizar" runat="server" OnClick="atualizarButton_Click" />
                <asp:Image ID="imagem" ImageUrl="~/Images/Painel.png" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>   

Para testar agora, podemos colocar um label apenas para ver se está tudo certo. O código até agora ficará assim:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="exemplo_image_write._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="ImageInfo" runat="server" /><br />
                <asp:TextBox ID="primeiraLinha" runat="server" /><br />
                <asp:TextBox ID="segundaLinha" runat="server" /><br />
                <asp:TextBox ID="terceiraLinha" runat="server" /><br />
                <asp:TextBox ID="quartaLinha" runat="server" /><br />
                <asp:TextBox ID="quintaLinha" runat="server" /><br />
                <asp:Button ID="atualizarButton" Text="atualizar" runat="server" OnClick="atualizarButton_Click" />
                <asp:Image ID="imagem" ImageUrl="~/Images/Painel.png" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>   
</asp:Content>

E colocamos o seguinte no evento de Click do Button:

        protected void atualizarButton_Click(object sender, EventArgs e)
        {
            ImageInfo.Text = "atualizou";
        }

Bom, até agora só criamos o projeto e preparamos a view para enviar algumas informações, porém ainda não tem nada sendo feito. Vamos para o que interessa. Vamos abrir a imagem Painel que está na pasta Images do projeto no github e vamos brincar um pouco com ela utilizando System.Drawing.Graphics. Primeiramente vamos criar um SolidBrush, definir a família da fonte e criar uma Font. Depois disso basta chamar o método DrawString e passar a fonte, um ponto para ele escrever o texto e o solidbrush.
Depois é só salvar a imagem. No caso, eu salvo uma nova imagem e atualizo o caminho do Image:

        protected void atualizarButton_Click(object sender, EventArgs e)
        {
            try
            {
                System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("Images/Painel.png"));
                ImageInfo.Text = "Image Size: [ " + image.Size + " ] - Pixel Format: [ " + image.PixelFormat + " ]";
                using (Graphics g = Graphics.FromImage(image))
                {
                    Brush solidBrush = new SolidBrush(Color.White);
                    FontFamily family = new FontFamily("Verdana");
                    Font font = new Font(family, 20.00f);
                    g.DrawString(primeiraLinha.Text, font, solidBrush, new PointF(100, 180));
                    g.DrawString(segundaLinha.Text, font, solidBrush, new PointF(100, 280));
                    g.DrawString(terceiraLinha.Text, font, solidBrush, new PointF(100, 380));
                    g.DrawString(quartaLinha.Text, font, solidBrush, new PointF(100, 480));
                    g.DrawString(quintaLinha.Text, font, solidBrush, new PointF(100, 580));
                    image.Save(Server.MapPath("Images/Painel_Alterado.png"));
                    imagem.ImageUrl = "~/Images/Painel_Alterado.png";
                }
            }
            catch (Exception ex) { ImageInfo.Text = "Ocorreu um problema: " + ex.Message; }
        }

E pronto, basta conferir o resultado agora!

Imagem alterada ASP.NET C# AJAX

Caso queira baixar o projeto, basta acessar o seguinte link no github.

Por hoje é só, abraço 😉

Anúncios

Um comentário sobre “Editar imagem com ASP.NET e Ajax

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s