Jul 07

Recortando imagens com jCrop e ASP.NET

Desenvolvimento No Comments »

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. <html xmlns=”http://www.w3.org/1999/xhtml”>
  4. <head runat=”server”>
  5. <title>jCrop and ASP.NET</title>
  6. <link href=”css/jquery.Jcrop.css” rel=”stylesheet” type=”text/css” />
  7. <script src=”js/jquery.min.js” type=”text/javascript”></script>
  8. <script src=”js/jquery.Jcrop.min.js” type=”text/javascript”></script>
  9. </head>
  10. <body>
  11. <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. <form id=”form1″ runat=”server”>
  24. <div>
  25. <asp:Panel ID=”pnlImageUpload” runat=”server”>
  26. <asp:FileUpload ID=”fupImagem” runat=”server” />
  27. <asp:Label ID=”lblStatus” runat=”server”></asp:Label>
  28. <br />
  29. <br />
  30. <asp:Button ID=”btnUploadImagem” runat=”server” Text=”Upload” OnClick=”btnUploadImagem_Click” />
  31. </asp:Panel>
  32. <asp:Panel ID=”pnlImageCrop” runat=”server” Visible=”false”>
  33. <asp:Image ID=”imgCrop” runat=”server” />
  34. <br />
  35. <br />
  36. <asp:HiddenField ID=”X” runat=”server” />
  37. <asp:HiddenField ID=”Y” runat=”server” />
  38. <asp:HiddenField ID=”W” runat=”server” />
  39. <asp:HiddenField ID=”H” runat=”server” />
  40. <asp:Button ID=”btnCrop” runat=”server” Text=”Recortar” OnClick=”btnCrop_Click” />
  41. </asp:Panel>
  42. <asp:Panel ID=”pnlCropped” runat=”server” Visible=”false”>
  43. <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

Jul 04

GridView com MySql

Desenvolvimento No Comments »

Bem vindos, neste primeiro post vou trabalhar um assunto  que é sempre utilizado, muitas vezes não dispomos de um banco de dados Sql Server na hospedagem utilizada, para resolver esse problema podemos integrar o MySql junto do Visual Studio 2008.

Utilizaremos duas dll’s que são responsáveis pela integração.

MySql.Data

MySqlProviders

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using MySql.Data.MySqlClient;

Feito isso podemos começar a programar, primeiro vamos inserir um grid na pagina default.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”tutorial._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>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server”>
</asp:GridView>
</div>
</form>
</body>
</html>

após isso no code behind devemos

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using MySql.Data.MySqlClient;

namespace Junior
{
public partial class Noticias1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//conexao com o banco de dados
string str = ConfigurationManager.ConnectionStrings["MySQLASPNETDB"].ToString();
//select para o banco
sql = “Select * from Noticias”;
//conexão Mysql
MySqlConnection conexao = new MySqlConnection(str);
//data Adapter
MySqlDataAdapter DA = new MySqlDataAdapter(sql, conexao);
//data set
DataSet DS = new DataSet();
//fil do data Adapter
DA.Fill(DS, “noticias”);
//grid datasource
GridView1.DataSource = DS;
GridView1.DataBind();

}
}
}

Finalmente para funcionar temos que criar uma conection string no webconfig.

<appSettings/>
<connectionStrings>
<add name=”MySQLASPNETDB” connectionString=”Database=Nomedobanco; Data Source=localhost; User Id=root;Password=root”
providerName=”MySqlProviders” />
</connectionStrings>
<system.web>

Com isso podemos utilizar o Visual Studio 2008 em Asp.net C# e Mysql.

Duvidas ou Sugestões entrem em contato

Obrigado,
Rodolfo Jr