asp.net platform of the picture online clipping function of the implementation code (source packaging) _ Practical skills

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.