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 dojcrop.

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.

Anúncios

2 Respostas para “Upload de imagem com recorte usando Jquery e asp.net

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s