Asp. Net platform image online clipping function implementation code of source package

1. Foreground display implementation

I found this jquery.Jcrop on the Internet, looked at it a little bit, and found that the effect it provided perfectly met the requirements of the project.

Official site: http: / / deepliquid com/content/Jcrop html, interested friends can go and see.

The page first references the relevant style and script:

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

Page body part of the code:

 
<asp:Label ID="Label1" Text=" The original image " runat="server"></asp:Label><br /> 
<asp:Image ID="target" runat="server" /> 
<br /> 
<asp:Label ID="Label2" runat="server" Text=" Final display "></asp:Label> 
<div id="preImg" style="width: 150px; height: 80px; overflow: hidden;"> 
<asp:Image ID="preview" alt="Preview" runat="server" /> 
</div> 

Where ID is preImg, Style, width and height are the size of the cropped image, and the overflow:hidden of DIV should be defined. The key CSS property to see the clipping effect of the image in time is CSS.

Let's talk about the basic usage of jquery.Jcrop.js and the implementation of javascript.

Start by defining some temporary variables to hold the relevant parameters

var jcrop_api, boundx, boundy;

Then bind the Jcrop function to the DOM element of the image, and the relevant method attributes can be understood 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 show the image clipping effect in time  
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); 
} 
$('#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 the foreground 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:
Start by referring to the associated namespace

 
using System.Drawing; 
using System.Drawing.Imaging; 
using System.Drawing.Design; 

Save the button's method, fetch the relevant parameters from the page, and then call the clipping 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.target.Visible = false; 
this.Label1.Visible = false; 
this.SaveImg.Enabled = false; 
} 
} 

The next is the most important cutting method:

 
// Create by connection Image object  
System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl); 
oldimage.Save(Server.MapPath("temp.jpg"));// The original image Copy1 Copy out , Then, in temp.jpg Cut up , Finally, the cropped image is overwritten  oldimage.Dispose();//1 Be sure to release the temporary images , Otherwise, later operations on the diagram will report an error , Cause conflict  Bitmap bm = new Bitmap(Server.MapPath("temp.jpg")); 
// To deal with JPG Function of mass  
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); 
//  Cut out pictures  
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) 
{ 
// Reduce 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 picture  
cloneBitmap.Save(out_ImgUrl, ici, ep); 
} 
cloneBitmap.Dispose(); 
bm.Dispose(); 
} 
public bool ThumbnailCallback() 
{ 
return false; 
} 

Main page source :source