Codificando .Net

Aprendizado, companherismo, ensino e aperfeiçoamento constante

Rodolfo

Recortando imagens com jCrop e ASP.NET

Boa noite a todos, neste post irei abordar como utilizar o jCrop (plugin do jQuery) para manipular imagens via C# com ASP.NET, este plugin oferece uma área e seleção sob a imagem, que, com isso pode ser manipulada através das cordenadas.

Ex jCrop: http://deepliquid.com/projects/Jcrop/demos.php

Para utilizar o jCrop é necessário fazer download de 2 arquivos:

http://docs.jquery.com/Downloading_jQuery

http://deepliquid.com/content/Jcrop_Download.html

Este exemplo será realizado em uma página, que realizará 3 principais processos:

1° Upload da imagem selecionada e sua exibição;


2° Seleção de área com jCrop, e recorte da imagem;



3° Exibição da imagem recortada;


Para isso após criada a página na solution do VS2008, iremos adicionar e indicar os arquivos do jQuery, jCrop e css(jCrop).

Add-jQuery-jCrop-VS2008

Após isso podemos criar o resto da página Default.aspx, nela existirá 3 Panel's dividindo as etapas, o primeiro para upload da imagem, o segundo para seu recorte e o terceiro para exibir o resutado do recorte.

Default.aspx
Code Snippet
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. /span>html xmlns="http://www.w3.org/1999/xhtml">
  4. /span>head runat="server">
  5. /span>title>jCrop and ASP.NET</title>
  6. /span>link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
  7. /span>script src="js/jquery.min.js" type="text/javascript"></script>
  8. /span>script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
  9. </head>
  10. /span>body>
  11. /span>script type="text/javascript">
  12. jQuery(document).ready(function() {
  13. jQuery('#imgCrop').Jcrop({
  14. onSelect: guardaCoordenadas});
  15. });
  16. function guardaCoordenadas(c) {
  17. jQuery('#X').val(c.x);
  18. jQuery('#Y').val(c.y);
  19. jQuery('#W').val(c.w);
  20. jQuery('#H').val(c.h);
  21. };
  22. </script>
  23. /span>form id="form1" runat="server">
  24. /span>div>
  25. /span>asp:Panel ID="pnlImageUpload" runat="server">
  26. /span>asp:FileUpload ID="fupImagem" runat="server" />
  27. /span>asp:Label ID="lblStatus" runat="server"></asp:Label>
  28. /span>br />
  29. /span>br />
  30. /span>asp:Button ID="btnUploadImagem" runat="server" Text="Upload" OnClick="btnUploadImagem_Click" />
  31. </asp:Panel>
  32. /span>asp:Panel ID="pnlImageCrop" runat="server" Visible="false">
  33. /span>asp:Image ID="imgCrop" runat="server" />
  34. /span>br />
  35. /span>br />
  36. /span>asp:HiddenField ID="X" runat="server" />
  37. /span>asp:HiddenField ID="Y" runat="server" />
  38. /span>asp:HiddenField ID="W" runat="server" />
  39. /span>asp:HiddenField ID="H" runat="server" />
  40. /span>asp:Button ID="btnCrop" runat="server" Text="Recortar" OnClick="btnCrop_Click" />
  41. </asp:Panel>
  42. /span>asp:Panel ID="pnlCropped" runat="server" Visible="false">
  43. /span>asp:Image ID="imgCropped" runat="server" />
  44. </asp:Panel>
  45. </div>
  46. </form>
  47. </body>
  48. </html>
Como é possivel ver nessa página é necessária uma manipulação via JavaScript das cordenadas geradas pela área de seleção do jCrop, os valores destas medidas são atribuidas aso Hiddenfields para serem acessados no ServerSide.

Já no ServerSide temos a seguinte situação

Default.aspx.cs
Code Snippet
using System;

using System.Configuration;

using System.Web;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.IO;

using SD = System.Drawing;

using System.Drawing.Imaging;

using System.Drawing.Drawing2D;

public partial class _Default : System.Web.UI.Page

{

String path;

Boolean ImageOK = false;

Boolean ImageSaved = false;

protected void Page_Load(object sender, EventArgs e)

{

Como é possivel observer deveremos adicionas vários namespaces, como:

System.IO;System.Drawing;

System.Drawing.Imaging;

System.Drawing.Drawing2D;

No evento PageLoad é realizado o mapeamento da Pasta no Servidor


Code Snippet
protected void Page_Load(object sender, EventArgs e)

{

path = Server.MapPath("images") + "//";

}

O outro evento contem a manipulação para o FileUploader, que primeiro verifica o arquivo, e salva ele em disco no local especificado, após isso ser realizado com sucesso ele alterna para a Pane onde será realizado o recorde da imagem que foi feita o UpLoad
Code Snippet
protected void btnUploadImagem_Click(object sender, EventArgs e)

{

if (fupImagem.HasFile)

{

ViewState["WorkingImage"] = fupImagem.FileName;

String FileExtension = Path.GetExtension(ViewState["WorkingImage"].ToString()).ToLower();

String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };

for (int i = 0; i < allowedExtensions.Length; i++)

{

if (FileExtension == allowedExtensions[i])

{

ImageOK = true;

}

}

}

if (ImageOK)

{

try

{

fupImagem.PostedFile.SaveAs(path + ViewState["WorkingImage"]);

ImageSaved = true;

}

catch (Exception ex)

{

lblStatus.Text = "Upload não realizado: " + ex.Message.ToString();

lblStatus.Visible = true;

ImageSaved = false;

}

}

else

{

lblStatus.Text = "Tipo inválido de arquivo.";

lblStatus.Visible = true;

}

if (ImageSaved)

{

pnlImageUpload.Visible = false;

pnlImageCrop.Visible = true;

imgCrop.ImageUrl = "images/" + ViewState["WorkingImage"].ToString();

}

}

No proximo evento é realizado a captura dos dados da área selecionada pelo jCrop e passados como parametro para o metodod que realizará o recorte.
Code Snippet
protected void btnCrop_Click(object sender, EventArgs e)

{

string ImageName = ViewState["WorkingImage"].ToString();

int w = Convert.ToInt32(W.Value);

int h = Convert.ToInt32(H.Value);

int x = Convert.ToInt32(X.Value);

int y = Convert.ToInt32(Y.Value);

byte[] CropImage = Crop(path + ImageName, w, h, x, y);

using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))

{

ms.Write(CropImage, 0, CropImage.Length);

using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))

{

string SaveTo = path + "crop" + ImageName;

CroppedImage.Save(SaveTo, CroppedImage.RawFormat);

pnlImageCrop.Visible = false;

pnlCropped.Visible = true;

imgCropped.ImageUrl = "images/crop" + ImageName;

}

}

}

static byte[] Crop(string Img, int Width, int Height, int X, int Y)

{

try

{

using (SD.Image OriginalImage = SD.Image.FromFile(Img))

{

using (SD.Bitmap bmp = new SD.Bitmap(Width, Height, OriginalImage.PixelFormat))

{

bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);

using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))

{

Graphic.SmoothingMode = SmoothingMode.AntiAlias;

Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;

Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;

Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);

MemoryStream ms = new MemoryStream();

bmp.Save(ms, OriginalImage.RawFormat);

return ms.GetBuffer();

}

}

}

}

catch (Exception Ex)

{

throw (Ex);

}

}

Após ser realizado o recorde da imagem a Pane que exibe o resultado é mostrada com o arquivo recortado.

Duvidas ou Sugestão entrem em contato.

Obrigado

Rodolfo

www.rodolfojunior.com

Tags: asp.net, jcrop, jquery

Comentar

Você precisa ser um membro de Codificando .Net para adicionar comentários!

Entrar em Codificando .Net

FULVIO CEZAR CANDUCCI DIAS Comentário de FULVIO CEZAR CANDUCCI DIAS em 28 março 2010 às 22:33
Super legal isso ai
Show de bola

Parabéns

Patrocínios

Comunidade Daruma 

Revista Mundo .Net 


Editora O'Reilly 


© 2010   Criado por Alexandre Tarifa   Powered by .

Badges  |  Relatar um incidente  |  Termos de serviço

Entrar no bate-papo