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).
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
- <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <html xmlns=”http://www.w3.org/1999/xhtml”>
- <head runat=”server”>
- <title>jCrop and ASP.NET</title>
- <link href=”css/jquery.Jcrop.css” rel=”stylesheet” type=”text/css” />
- <script src=”js/jquery.min.js” type=”text/javascript”></script>
- <script src=”js/jquery.Jcrop.min.js” type=”text/javascript”></script>
- </head>
- <body>
- <script type=”text/javascript”>
- jQuery(document).ready(function() {
- jQuery(‘#imgCrop’).Jcrop({
- onSelect: guardaCoordenadas});
- });
- function guardaCoordenadas(c) {
- jQuery(‘#X’).val(c.x);
- jQuery(‘#Y’).val(c.y);
- jQuery(‘#W’).val(c.w);
- jQuery(‘#H’).val(c.h);
- };
- </script>
- <form id=”form1″ runat=”server”>
- <div>
- <asp:Panel ID=”pnlImageUpload” runat=”server”>
- <asp:FileUpload ID=”fupImagem” runat=”server” />
- <asp:Label ID=”lblStatus” runat=”server”></asp:Label>
- <br />
- <br />
- <asp:Button ID=”btnUploadImagem” runat=”server” Text=”Upload” OnClick=”btnUploadImagem_Click” />
- </asp:Panel>
- <asp:Panel ID=”pnlImageCrop” runat=”server” Visible=”false”>
- <asp:Image ID=”imgCrop” runat=”server” />
- <br />
- <br />
- <asp:HiddenField ID=”X” runat=”server” />
- <asp:HiddenField ID=”Y” runat=”server” />
- <asp:HiddenField ID=”W” runat=”server” />
- <asp:HiddenField ID=”H” runat=”server” />
- <asp:Button ID=”btnCrop” runat=”server” Text=”Recortar” OnClick=”btnCrop_Click” />
- </asp:Panel>
- <asp:Panel ID=”pnlCropped” runat=”server” Visible=”false”>
- <asp:Image ID=”imgCropped” runat=”server” />
- </asp:Panel>
- </div>
- </form>
- </body>
- </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
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
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
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.
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
