jQuery Crop Image in Asp.net using Jcrop jQuery
jQuery Crop Image in Asp.net using Jcrop jQuery and Upload to web Folder:
in this Post we describe cropping static image that is
stored on web folder and save it into new folder. Here give gives an example by this we see how to cropping image
in to asp.net. Here we use jQuery for cropping image and save in web. In the
past post we saw how to upload image and crop uploaded image.
Now here we see how to perform cropping in saved image in
asp.net.
Jcrop jQuery Plugin for cropping:
For crop image we need download a jquery form web for
working with cropping oration by Jcrop jQuery Plugin download here
Crop Image in Asp.net using Jcrop jQuery Plugin
<%@ 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>
<title>jQuery Crop Image using crop plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('#imgcrop').Jcrop({
onSelect: getcroparea
});
})
function getcroparea(c) {
$('#hdx').val(c.x);
$('#hdy').val(c.y);
$('#hdw').val(c.w);
$('#hdh').val(c.h);
};
</script>
<style type="text/css">
#imgcrop
{
height: 291px;
width: 479px;
}
#imgcropped
{
width: 186px;
height: 202px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<br />
<h1>Exampel of Image cropping in asp.net using
JQuery. </h1>
<p>crop and save in web server foulder:</p>
<br />
<img src="images/Arkady%20Ostrisky%20art.jpg"
id="imgcrop"
alt="sample
image"/>
<input type="hidden"
id="hdx"
runat="server"
/>
<input type="hidden"
id="hdy"
runat="server"/>
<input type="hidden"
id="hdw"
runat="server"/>
<input type="hidden"
id="hdh"
runat="server"
/>
<br />
<br />
<asp:Button ID="btncrop"
runat="server"
OnClick="btncrop_Click"
Text="Crop
Images" />
<br />
<h2>Craped Image.</h2>
<br />
<img id="img_cropped"
runat="server"
visible="false"
/>
</div>
</form>
</body>
</html>
Crop Image in Asp.net using Jcrop jQuery C# code:
using System;
using System.Drawing;
using System.IO;
using Image =
System.Drawing.Image;
public partial class _Default :
System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void
btncrop_Click(object sender, EventArgs e)
{
try
{
string fname = "Arkady
Ostrisky art.jpg";
string
fpath = Path.Combine(Server.MapPath("~/images"), fname);
Image img = Image.FromFile(fpath);
Rectangle cropcords = new Rectangle(
Convert.ToInt32(hdx.Value),
Convert.ToInt32(hdy.Value),
Convert.ToInt32(hdw.Value),
Convert.ToInt32(hdh.Value));
string cf_name, cf_path;
Bitmap bitMap = new Bitmap(cropcords.Width,
cropcords.Height, img.PixelFormat);
Graphics
grph = Graphics.FromImage(bitMap);
grph.DrawImage(img, new Rectangle(0, 0, bitMap.Width, bitMap.Height),
cropcords, GraphicsUnit.Pixel);
cf_name = "crop_" + fname;
cf_path = Path.Combine(Server.MapPath("~/cropimages"), cf_name);
bitMap.Save(cf_path);
img_cropped.Visible = true;
img_cropped.Src = "~/cropimages/"
+ cf_name;
}
catch (Exception
ex)
{
throw ex;
}
}
}
Download Full code : click here..
JQuery related Posts:
- Check Uncheck all asp.net CheckBox in asp.net using jQuery
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Example jQuery Validate on CheckBoxList using C#
- Check Uncheck all html CheckBox controls using jQuery:
- fill data into Dropdown list by using Jquery
- Validate ASP.Net RadioButtonList using JavaScript Example
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Example jQuery Validate on CheckBoxList using C#
- Check Uncheck all asp.net CheckBox in asp.net using jQuery
- Check Uncheck all html CheckBox controls using jQuery:
- Limit Number of Characters in a TextArea using jQuery
- Limitation of Characters in Textbox or TextArea in asp.netusing jquery:
- Asp.net CheckBoxList using jQuery.
- Enable Disable Submit Button using jQuery
- jquery disable or Enable submit button after validation
Asp.net Programming web server control Related Post :
- Example of C# for Bind Data to asp.net Textbox inside gridview control
- Bind Data to asp.net textbox control in inside of gridview Using C# Example
- Add ListItem in DropDownList asp.net c# Example
- Drop Down List control of asp.net
- Select option to the user from many items.
- Display tooltip from database for dropdownlist items in asp.net c# example
- Show tooltip dropdownlist items by mouse over event using C# example
- Example of Adding ToolTip for each Dropdown List Item in C#
- Cropping image using jQuery in asp.net
- Checkboxlist control in asp net
- Asp.net CheckBoxList using jQuery
- Displaying the textbox value in javascript Messagebox
- How do you do html text encodes using JavaScript
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
csharp image codings
ReplyDeleteWrite Jpeg file from BitmapSource