Imagine que seu cliente quer um SlideShow de imagens no site dele, igual ao que ele viu em outro site.
Mas as imagens desse SlideShow são de 900x400 pixels, nesse caso, redimencionar as imagens não ficaria bom.
Entao a solucao e que, quando o usuario faca o upload da imagem, ele já selecione a parte da imagem que sera cortada e usada no SlideShow.
Nesse exemplo uso JCrop e ASP.NET para selecionar parte da imagem a ser recortada..png)
Download Jcrop
Download do projeto inteiro
Vamos ao codigo:
default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Selecionar e cortar parte da foto com ASP.NET e javascript</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript" type="text/javascript">
$(function () {
$('.cropbox').Jcrop({
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
onSelect: updateCoords
});
});
function updateCoords(c) {
$('#txtX').val(c.x);
$('#txtY').val(c.y);
$('#txtW').val(c.w);
$('#txtH').val(c.h);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="litError" runat="server" />
<!-- Panel de Upload -->
<asp:Panel ID="PnlUpload" runat="server">
<div>
<asp:FileUpload ID="fupImage" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="Fazer upload"
onclick="btnUpload_Click" />
</div>
</asp:Panel>
<!-- /Panel de Upload -->
<!-- Panel de seleção e recorte de imagem -->
<asp:Panel ID="pnlCutImage" runat="server" Visible="false">
<div>
<!-- Imagem recebida por upload -->
<asp:Image CssClass="cropbox" ID="imgPhoto" runat="server" />
<!-- Campos que registram a posição e a parte selecionada -->
<asp:HiddenField ID="txtX" runat="server" />
<asp:HiddenField ID="txtY" runat="server" />
<asp:HiddenField ID="txtW" runat="server" />
<asp:HiddenField ID="txtH" runat="server" />
</div>
<div>
<asp:Button ID="btnSave" runat="server" Text="Salvar"
onclick="btnSave_Click" />
</div>
</asp:Panel>
<!-- /Panel de seleção e recorte de imagem -->
<!-- Panel resultado -->
<asp:Panel ID="pnlResulado" runat="server" Visible="false">
<div>
<asp:Image ID="imgResultado" runat="server" />
</div>
</asp:Panel>
<!-- /Panel resultado -->
</form>
</body>
</html>
default.aspx.cs
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
#region btnUpload_Click
protected void btnUpload_Click(object sender, EventArgs e)
{
//Verificar se existe algum arquivo
if (fupImage.HasFile)
{
bool bValido = false;
string sPath = Server.MapPath("~/upload/"); //caminho onde vai ser salva
string sFileName = fupImage.FileName;
sImgFile = sPath + sFileName;
//Verifica se é imagem
string fileExtension = System.IO.Path.GetExtension(sFileName).ToLower();
foreach (string ext in new string[] { ".gif", ".png", ".jpeg", ".jpg" })
{
if (fileExtension == ext)
bValido = true;
}
if (bValido)
{
try
{
//Cria o diretorio se ainda não existir
if (!Directory.Exists(sPath))
Directory.CreateDirectory(sPath);
//Salvar imagem
fupImage.SaveAs(sImgFile);
pnlCutImage.Visible = true;
PnlUpload.Visible = false;
imgPhoto.ImageUrl = "~/upload/" + sFileName;
}
catch (Exception ex)
{
litError.Text = "Ocorreu o seguinte erro:" + ex;
}
}
else
{
litError.Text = "O arquivo selecionado não e válido";
}
}
else
{
litError.Text = "Nenhum arquivo selecionado";
}
}
#endregion
#region btnSave_Click
protected void btnSave_Click(object sender, EventArgs e)
{
//Validando se foi selecionada alguma parte da imagem.
if (string.IsNullOrEmpty(txtX.Value))
litError.Text = "Selecione a parte da imagem a ser recortada!";
else
{
int x = Convert.ToInt32(txtX.Value);
int y = Convert.ToInt32(txtY.Value);
int w = Convert.ToInt32(txtW.Value);
int h = Convert.ToInt32(txtH.Value);
//Verificar se a parte selecionada é maior que zero.
if (w < 1 || h < 1)
litError.Text = "Selecione a parte da imagem a ser recortada!";
else
{
//Cortar imagem
Rectangle cropRect = new Rectangle(x, y, w, h);
Bitmap src = System.Drawing.Image.FromFile(sImgFile) as Bitmap;
Bitmap target = new Bitmap(cropRect.Width, cropRect.Height);
using (Graphics g = Graphics.FromImage(target))
{
g.DrawImage(src,
new Rectangle(0, 0, target.Width, target.Height),
cropRect, GraphicsUnit.Pixel);
}
string sFileName = "imagem_recortada.jpg";
//Salvar imagem recortada
target.Save(Server.MapPath("~/upload/") + sFileName);
//Exibir imagem recortada
pnlResulado.Visible = true;
PnlUpload.Visible =
pnlCutImage.Visible = false;
imgResultado.ImageUrl = "~/upload/" + sFileName;
target.Dispose();
src.Dispose();
}
}
}
#endregion