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
- http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET
- http://msdn.microsoft.com/en-us/library/system.drawing.aspx
- http://jquery.com/
- http://deepliquid.com/content/Jcrop.html
Espero que esse artigo sirva para agregar conhecimento à comunidade. Até a próxima.