Online image cropping on Asp. Net platform

 

Recently, there was an online Image cropping function in the project. I used the following method to find information: jquery. Jcrop is used for front-end display, and the System. Drawing. Image class is used for cropping in the background.

 

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:

 

<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:

 

<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.

 

$ ('# 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:

 

<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 namespace

 

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.

 

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:

 

<SPAN style = "COLOR: blue"> public void </SPAN> ImgReduceCutOut (<SPAN style = "COLOR: blue"> int </SPAN> startX, <SPAN style = "COLOR: blue"> int </SPAN> startY, <SPAN style = "COLOR: blue"> int </SPAN> int_Width, <SPAN style = "COLOR: blue"> int </SPAN> int_Height, <SPAN style = "COLOR: blue"> string </SPAN> input_ImgUrl, <SPAN style = "COLOR: blue"> string </SPAN> out_ImgUrl)

{

<SPAN style = "COLOR: green"> // upload the standard image size.

</SPAN> <SPAN style = "COLOR: blue"> int </SPAN> int_Standard_Width = 150;

<SPAN style = "COLOR: blue"> int </SPAN> int_Standard_Height = 80;

 

<SPAN style = "COLOR: green"> // you can specify more parameters when cropping an image, such as narrowing down the original image and then cropping it. in this example, </SPAN> <SPAN style = "COLOR: #008000" color = "#008000"> after cropping, scale down the cropped image to 150X80 </SPAN>

// 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.

Oldimage. Dispose (); // make sure to release the temporary image. Otherwise, an error will be reported for subsequent operations on the image due to a conflict of causes.

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: http://www.bkjia.com/uploadfile/2011/1019/20111019020803467.rar

From: simple