1. The foreground unfolds realizes
Find this jquery online. Jcrop, a little look, found that it provides the effect can fully meet the project requirements.
Official website: http://deepliquid.com/content/Jcrop.html, interested friends can go and see.
The page first references the related styles and scripts:
Copy Code code 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>
The body part of the page code:
Copy Code code as follows:
<asp:label id= "Label1" text= "original picture" 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 value of the width and height of the style with ID preimg is the size of the cropped picture, and the Overflow:hidden of the Div is defined. The key CSS attribute that can see the clipping effect of the picture in time is it.
Next, I'll talk about jquery. The basic usage of jcrop.js, and the implementation of related JavaScript.
First define some temporary variables to save the relevant parameters
var jcrop_api, Boundx, Boundy;
Then to the image of the DOM element binding Jcrop function, the related method properties to see English can understand the meaning.
Copy Code code 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 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:
Copy Code code 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 Picture" onclick= "saveimg" onclientclick= "return checkimg ()"/>
</form>
Implementation of background code:
First reference to related namespaces
Copy Code code as follows:
Using System.Drawing;
Using System.Drawing.Imaging;
Using System.Drawing.Design;
Saves the button's method, takes it from the page to the related parameter, and then calls the cropping method.
Copy Code code 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.target.Visible = false;
This. Label1.visible = false;
This. saveimg.enabled = false;
}
}
Next is the most important cutting method:
Copy Code code as follows:
Create an Image object from a connection
System.Drawing.Image oldimage = System.Drawing.Image.FromFile (Input_imgurl);
Oldimage. Save (Server.MapPath ("temp.jpg"))//copy of the original book out, and then on the temp.jpg to cut, and finally cut the picture to cover the original oldimage. Dispose ();//Be sure to release the temporary picture, otherwise the operation on this diagram will be an error, cause conflict Bitmap BM = new Bitmap (Server.MapPath ("temp.jpg"));
Functions for processing JPG quality
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 a picture
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)
{
Shrink picture
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 picture
Clonebitmap.save (Out_imgurl, ICI, EP);
}
Clonebitmap.dispose ();
Bm. Dispose ();
}
public bool Thumbnailcallback ()
{
return false;
}
Main Page Source: source
