I have a working code which lets me crop an uploaded image and then store it to a folder.This works when i dont specify the height and width of the ImageToCrop but if i dont do that the image takes up the entire page and it is hard to make a selection to crop.I tried specifying height and width of ImageToCrop and save the cropped image but the selection is wrong and is not what i selected.Below is the code for the same.
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ift.tt/Qr28dm"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
<link href="CSS/jquery.Jcrop.css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%=imgToCrop.ClientID%>').Jcrop({
onSelect: getAreaToCrop
});
});
function getAreaToCrop(c) {
$('#XCoordinate').val(parseInt(c.x));
$('#YCoordinate').val(parseInt(c.y));
$('#Width').val(parseInt(c.w));
$('#Height').val(parseInt(c.h));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 540px">
<fieldset>
<legend>Upload, crop and save image in asp.net</legend>
<table>
<tr>
<td>
Select image to upload :
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
<td>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Image ID="imgCropped" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btnReset" runat="server" Text="Reset" Visible="false" OnClick="btnReset_Click" />
</td>
</tr>
</table>
<asp:Panel ID="pnlCrop" runat="server" Visible="false">
<table>
<tr>
<td>
<asp:Image ID="imgToCrop" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
</td>
</tr>
<tr>
<td>
<input id="XCoordinate" type="hidden" runat="server" />
<input id="YCoordinate" type="hidden" runat="server" />
<input id="Width" type="hidden" runat="server" />
<input id="Height" type="hidden" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</fieldset>
</div>
</form>
</body>
The code-behind is as below:
protected void btnUpload_Click(object sender, EventArgs e)
{
string fileName = string.Empty;
string filePath = string.Empty;
string extension = string.Empty;
try
{
//Check if Fileupload control has file in it
if (FileUpload1.HasFile)
{
// Get selected image extension
extension = Path.GetExtension(FileUpload1.FileName).ToLower();
//Check image is of valid type or not
if (extension == ".jpg" || extension == ".jpeg" || extension == ".png" || extension == ".gif" || extension == ".bmp")
{
//Cretae unique name for the file
fileName = Guid.NewGuid().ToString() + extension;
//Create path for the image to store
filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
//Save image in folder
FileUpload1.SaveAs(filePath);
//Show the panel and load the uploaded image in image control.
pnlCrop.Visible = true;
imgToCrop.ImageUrl = "~/Images/" + fileName;
}
else
{
lblMsg.Text = "Please select jpg, jpeg, png, gif or bmp file only";
}
}
else
{
lblMsg.Text = "Please select file to upload";
}
}
catch (Exception ex)
{
lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
}
finally
{
extension = string.Empty;
fileName = string.Empty;
filePath = string.Empty;
}
}
protected void btnCrop_Click(object sender, EventArgs e)
{
string croppedFileName = string.Empty;
string croppedFilePath = string.Empty;
//get uploaded image name
string fileName = Path.GetFileName(imgToCrop.ImageUrl);
//get uploaded image path
string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
//Check if file exists on the path i.e. in the UploadedImages folder.
if (File.Exists(filePath))
{
//Get the image from UploadedImages folder.
System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
//Get user selected cropped area
//Convert.ToInt32(String.Format("{0:0.##}", YCoordinate.Value)),
Rectangle areaToCrop = new Rectangle(
Convert.ToInt32(XCoordinate.Value),
Convert.ToInt32(YCoordinate.Value),
Convert.ToInt32(Width.Value),
Convert.ToInt32(Height.Value));
try
{
Bitmap bitMap = new Bitmap(areaToCrop.Width, areaToCrop.Height);
//Create graphics object for alteration
using (Graphics g = Graphics.FromImage(bitMap))
{
//Draw image to screen
g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), areaToCrop, GraphicsUnit.Pixel);
}
//name the cropped image
croppedFileName = "crop_" + fileName;
//Create path to store the cropped image
croppedFilePath = Path.Combine(Server.MapPath("~/Images"), croppedFileName);
//save cropped image in folder
bitMap.Save(croppedFilePath);
orgImg.Dispose();
bitMap = null;
//Now you can delete the original uploaded image from folder
File.Delete(filePath);
//Hide the panel
pnlCrop.Visible = false;
//Show success message in label
lblMsg.ForeColor = Color.Green;
lblMsg.Text = "Image cropped and saved successfully";
//Show cropped image
imgCropped.ImageUrl = "~/Images/" + croppedFileName;
string CS = ConfigurationManager.ConnectionStrings["SportsActiveConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
con.Open();
SqlCommand cmd = new SqlCommand("spLogo", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@LogoPath", "Images/" + croppedFileName);
cmd.ExecuteNonQuery();
}
//Show Reset button
btnReset.Visible = true;
}
catch (Exception ex)
{
lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
}
finally
{
fileName = string.Empty;
filePath = string.Empty;
croppedFileName = string.Empty;
croppedFilePath = string.Empty;
}
}
Any help will be appreciated
Aucun commentaire:
Enregistrer un commentaire