Upload de imagem com recorte usando Jquery e asp.net

Quem nunca quis disponibilizar,
em sua aplicação, a possibilidade de o usuário subir uma imagem e recortá-la, como vários sites já fazem? Dei uma pesquisada, estudei sobre o System.Drawing, jquery e resolvi compartilhar aqui o que consegui. Veja só.

Bibliotecas

A primeira
coisa a ser feita aqui é baixar alguns arquivos, faça o download do jquery e do jcrop.

Namespaces

Inclua os
seguintes namespaces em sua página:

System.IO
System.Drawing
System.Drawing.Imaging
System.Drawing.Drawing2D

O namespace System.Drawing sera utilizado
com apelido SD

Formulário

Adicione três controles do tipo Panel no formulário, conforme a
tabela abaixo:

ID	Visible
UploadPanel	True
ImagemOriginalPanel	False
ImagemRecortadaPanel	False

Dentro
do UploadPanel adicione os controles dessa forma:

Tipo	ID	Text	Visible
FileUpload	ArquivoFileUpload	N/A	True
Button	UploadButton	Upload	True
Label	ErroLabel	“”	False

Dentro
do ImagemOriginalPanel adicione os controles como mostrado:

Tipo	ID	Text
Image	OriginalImage	N/A
Button	RecortarButton	Recortar
HiddenField	XHiddenField	N/A
HiddenField	YHiddenField	N/A
HiddenField	WHiddenField	N/A
HiddenField	HHiddenField	N/A

Dentro
do ImagemRecortadaPanel adicione o seguinte controle:

Tipo	ID	Text
Image	ImagemRecortadaImage	N/A

O código da sua página deve estar bem parecido com este:

    <form id="form1" runat="server">
        <asp:Panel ID="UploadPanel" runat="server">
            <asp:FileUpload ID="ArquivoFileUpload" runat="server"/>
            <asp:Button ID="UploadButton" runat="server" Text="Upload" />
        </asp:Panel>
        <asp:Panel ID="ImagemOriginalPanel" runat="server" Visible="false">
            <asp:Image ID="OriginalImage" runat="server" />
            <asp:Button ID="RecortarButton" runat="server" Text="Recortar" />
            <asp:HiddenField ID="XHiddenField" runat="server" />
            <asp:HiddenField ID="YHiddenField" runat="server" />
            <asp:HiddenField ID="WHiddenField" runat="server" />
            <asp:HiddenField ID="HHiddenField" runat="server" />
        </asp:Panel>
        <asp:Panel ID="ImagemRecortadaPanel" runat="server" Visible="false">
            <asp:Image ID="ImagemRecortadaImage" runat="server" />
        </asp:Panel>

Estrutura do site

Adicione
uma pasta com o nome imagens ao site.

Arquivos das bibliotecas

Adicione
os seguintes arquivos no site:

jquery.min.js
jquery.Jcrop.js
jquery.Jcrop.css

HTML

Inclua
as referências para os arquivos na sua página.

<script src="jquery.min.js" /></script>
<script src="jquery.Jcrop.js" /></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />

Aplicando o Jcrop

Inclua as
seguintes funções na sua página:

        jQuery(document).ready(function(){
            jQuery('#OriginalImage').Jcrop({
                onSelect: marcaPontos
            });
        });

        function marcaPontos(c) {
            jQuery('#XHiddenField').val(c.x);
            jQuery('#YHiddenField').val(c.y);
            jQuery('#WHiddenField').val(c.w);
            jQuery('#HHiddenField').val(c.h);
        };

É realmente muito simples. Jcrop foi aplicado ao controle OriginalImage
que está dentro de ImagemOriginalPanel, e um handler foi adicionado ao evento de
selecionar a imagem. Isso acontecerá quando o usuário tiver acabado de
selecionar a área da imagem que deseja manter. O handler chamada a função
marcaPontos, que define os valores dos campos XHiddenField, HiddenField, WHiddenField
e HHiddenField passando as coordenadas.

Code Behind

O código
abaixo irá pegar o caminho físico da pasta imagens e guardá-lo na variável pasta,
declare-o no começo da classe da página.

string pasta = HttpContext.Current.Request.PhysicalApplicationPath + "imagens\\";

No evento click do botão
upload adicione o seguinte código:

    protected void UploadButton_Click(object sender, EventArgs e)
    {
        bool extensaoPermitida = false;
        bool arquivoGravado = false;

        if (ArquivoFileUpload.HasFile)
        {
            string extensaoArquivo = Path.GetExtension(ArquivoFileUpload.FileName);

            string[] extensoesPermitidas = { ".png", ".jpg", ".gif", ".jpeg" };

            for (int i = 0; i < extensoesPermitidas.Length; i++)
                if (extensoesPermitidas[i] == extensaoArquivo)
                    extensaoPermitida = true;

            if (extensaoPermitida)
            {
                try
                {
                    ArquivoFileUpload.PostedFile.SaveAs(pasta + ArquivoFileUpload.FileName);
                    arquivoGravado = true;
                }
                catch (Exception ex)
                {
                    ErroLabel.Text = "Ocorreu um problema na tentativa de salvar o arquivo." + ex.ToString();
                    ErroLabel.Visible = true;
                    arquivoGravado = false;
                }
            }
            else
            {
                ErroLabel.Text = string.Format("Tipo de arquivo inválido. Tipo aceitos {0}.", extensoesPermitidas.ToString());
                ErroLabel.Visible = true;
            }

            if (arquivoGravado)
            {
                ImagemOriginalPanel.Visible = true;
                OriginalImage.ImageUrl = "imagens/" + ArquivoFileUpload.FileName;
                Session["arquivo"] = ArquivoFileUpload.FileName;
            }
        }
    }

No evento click do botão recortar
adicione o seguinte código:

   
protected void RecortarButton_Click(object sender, EventArgs e)
    {
        string nomeArquivo = Session["arquivo"].ToString();

        int eixoX = Convert.ToInt32(XHiddenField.Value);
        int eixoY = Convert.ToInt32(YHiddenField.Value);
        int largura = Convert.ToInt32(WHiddenField.Value);
        int altura = Convert.ToInt32(HHiddenField.Value);


        byte[] recorte = Recortar(pasta + nomeArquivo, largura, altura, eixoX, eixoY);

        using (MemoryStream ms = new MemoryStream(recorte, 0, recorte.Length))
        {
            ms.Write(recorte, 0, recorte.Length);

            using (SD.Image imagemRecortada = SD.Image.FromStream(ms, true))
            {
                string salvarEm = pasta + "crop" + nomeArquivo;
                imagemRecortada.Save(salvarEm, imagemRecortada.RawFormat);
                ImagemOriginalPanel.Visible = false;
                ImagemRecortadaPanel.Visible = true;
                ImagemRecortadaImage.ImageUrl = "imagens/crop" + nomeArquivo;
            }
        }
    }

Crie um método do tipo void conforme
abaixo.

  private byte[] Recortar(string nomeAbsolutoArquivo, int largura, int altura, int eixoX, int eixoY)
    {
        try
        {
            using (SD.Image imagemOriginal = SD.Image.FromFile(nomeAbsolutoArquivo))
            {
                using (SD.Bitmap bitmap = new System.Drawing.Bitmap(largura, altura))
                {
                    bitmap.SetResolution(imagemOriginal.HorizontalResolution, imagemOriginal.VerticalResolution);

                    using (SD.Graphics grafico = SD.Graphics.FromImage(bitmap))
                    {
                        grafico.SmoothingMode = SmoothingMode.AntiAlias;
                        grafico.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        grafico.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        grafico.DrawImage(imagemOriginal, new System.Drawing.Rectangle(0, 0, largura, altura), eixoX, eixoY, largura, altura, SD.GraphicsUnit.Pixel);
                        MemoryStream ms = new MemoryStream();
                        bitmap.Save(ms, imagemOriginal.RawFormat);
                        return ms.GetBuffer();
                    }
                }
            }
        }
        catch (Exception ex)
        {

            throw ex;
        }
    }

Agora é só colocar tudo para
rodar. Não é um bicho de sete cabeças, a questão é juntar tudo.

Referências

Espero que esse artigo sirva para
agregar conhecimento à comunidade. Até a próxima.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: