Code for online image cropping on the Asp. Net platform (source code packaging)

1. Foreground display implementation

Find this jquery. Jcrop on the Internet. After reading it, we find that the effect it provides can fully meet the project requirements.

Official Website: http://deepliquid.com/content/jcrop.html. For more information, see.

The page first references related styles and scripts:Copy codeThe Code is as follows: <link href = "Styles/jquery.Jcrop.css" rel = "stylesheet" type = "text/css"/>
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. Jcrop. js" type = "text/javascript"> </script>

Code of the page body:Copy codeThe Code is as follows: <asp: Label ID = "Label1" Text = "Original Image" runat = "server"> </asp: Label> <br/>
<Asp: Image ID = "target" runat = "server"/>
<Br/>
<Asp: Label ID = "Label2" runat = "server" Text = "final display effect"> </asp: Label>
<Div id = "preImg" style = "width: 150px; height: 80px; overflow: hidden;">
<Asp: Image ID = "preview" alt = "Preview" runat = "server"/>
</Div>

The width and height values of the Style with the ID of preImg are the size of the cropped image, and the overflow: hidden of the div should be defined. the key CSS attribute that allows you to see the image cropping Effect in a timely manner is it.

Next, let's talk about the basic usage of jquery. Jcrop. js and the implementation of related javascript.

First, define some temporary variables to save relevant parameters.

Var jcrop_api, boundx, boundy;

Then, bind the Jcrop function to the DOM element of the image. You can see the meaning of the method attributes in English.Copy codeThe Code is as follows: $ ('# target'). Jcrop ({
OnChange: updatePreview,
OnSelect: updatePreview,
OnRelease: clearCoords,
AspectRatio: 150/80,
MinSize: _ minarray,
SetSelect: _ array
}, Function (){
Var bounds = this. getBounds ();
Boundx = bounds [0];
Boundy = bounds [1];
Jcrop_api = this;
});
// This method is used to display the image cropping Effect in a timely manner.
Function updatePreview (c ){
If (parseInt (c. w)> 0 ){
Var rx = 150/c. w;
Var ry = 80/c. h;
Var _ width;
Var _ height;
If (Math. round (rx * boundx)> $ targetImg. width ()){
_ Width = $ targetImg. width ();
}
Else {
_ Width = Math. round (rx * boundx );
}
If (Math. round (ry * boundy)> $ targetImg. height ()){
_ Height = $ targetImg. height ();
}
Else {
_ Height = Math. round (ry * boundy );
}
Certificate ('{preview'}.css ({
Width: _ width + 'px ',
Height: _ height + 'px ',
MarginLeft: '-' + Math. round (rx * c. x) + 'px ',
MarginTop: '-' + Math. round (ry * c. y) + 'px'
});
}
$ ('# X1'). val (c. x );
$ ('# Y1'). val (c. y );
$ ('# Iwidth'). val (c. w );
$ ('# Iheight'). val (c. h );
};

Another part of front-end code:Copy codeThe Code is as follows: <form id = "Form1" runat = "server">
<Asp: HiddenField ID = "HdnNewImgPath" runat = "server"/>
<Asp: HiddenField ID = "x1" runat = "server"/>
<Asp: HiddenField ID = "y1" runat = "server"/>
<Asp: HiddenField ID = "Iwidth" runat = "server"/>
<Asp: HiddenField ID = "Iheight" runat = "server"/>
<Br/>
<Asp: Button ID = "SaveImg" runat = "server" Text = "crop and save the image" OnClick = "saveImg" OnClientClick = "return CheckIMG ()"/>
</Form>

Implementation of background code:
First, reference the relevant namespaceCopy codeThe Code is as follows: using System. Drawing;
Using System. Drawing. Imaging;
Using System. Drawing. Design;

Save the button method, get the relevant parameters from the page, and then call the cropping method.Copy codeThe Code is as follows: protected void saveImg (object sender, EventArgs e)
{
If (IsPostBack)
{
String tempurl = Path. Combine (ConfigAccess. UploadImagePath, _ url );
Int startX = int. Parse (x1.Value );
Int startY = int. Parse (y1.Value );
Int width = int. Parse (Iwidth. Value );
Int height = int. Parse (Iheight. Value );
ImgReduceCutOut (startX, startY, width, height, tempurl, tempurl );
This.tar get. Visible = false;
This. Label1.Visible = false;
This. SaveImg. Enabled = false;
}
}

Next is the most important cropping method:Copy codeThe Code is as follows: // create an Image object through a connection
System. Drawing. Image oldimage = System. Drawing. Image. FromFile (input_ImgUrl );
Oldimage. save (Server. mapPath ("temp.jpg"); // copy the original image, crop it on temp.jpg, and overwrite the cropped image in oldimage. dispose (); // make sure to release the temporary image. Otherwise, an error will be reported for subsequent operations on the image. The cause of the conflict is Bitmap bm = new Bitmap (Server. mapPath ("temp.jpg "));
// Processing JPG Quality Functions
ImageCodecInfo [] codecs = ImageCodecInfo. GetImageEncoders ();
ImageCodecInfo ici = null;
Foreach (ImageCodecInfo codec in codecs)
{
If (codec. MimeType = "image/jpeg ")
{
Ici = codec;
Break;
}
}
EncoderParameters ep = new EncoderParameters ();
Ep. Param [0] = new EncoderParameter (Encoder. Quality, (long) level );
// Crop an image
Rectangle cloneRect = new Rectangle (startX, startY, int_Width, int_Height );
PixelFormat format = bm. PixelFormat;
Bitmap cloneBitmap = bm. Clone (cloneRect, format );
If (int_Width> int_Standard_Width)
{
// Zoom out the image
System. Drawing. Image cutImg = cloneBitmap. GetThumbnailImage (int_Standard_Width, int_Standard_Height, new System. Drawing. Image. GetThumbnailImageAbort (ThumbnailCallback), IntPtr. Zero );
CutImg. Save (out_ImgUrl, ici, ep );
CutImg. Dispose ();
}
Else
{
// Save the image
CloneBitmap. Save (out_ImgUrl, ici, ep );
}
CloneBitmap. Dispose ();
Bm. Dispose ();
}
Public bool ThumbnailCallback ()
{
Return false;
}

Main Page source code: source