Asp.net implements online screenshot taking (large image capturing is a small image)

Recently, I have read that some websites provide excellent online functions. After uploading an image, you can crop it to a fixed size for your own photo.
Me Article Is to achieve this function, the development tool is vs2005 and two JS class libraries, dom-drag.js and jquery, the use of relatively simple, the two JS class libraries hate excellent, we suggest you look at it again.
First let's take a look

This effect is simulated, so we won't talk about how to upload images or other small issues. The large image has been uploaded to the server. Then there is a black border with a frame length and a width of PX. We just want to take an image of this size as our avatar. You can drag the black box to a proper position to capture the desired image. In the IE7 effect, you must click the border to drag the border. In Firefox, you can click anywhere in the black box. In addition, I have no boundary limit for this black box, that is, he should not drag out the range of this large image. An error is returned if it is dragged out.
We need to create the cutimage. aspx and cutimageajax. aspx pages.
Cutimage. aspx is what we see.
<Script language = JavaScript src = drag. js> </SCRIPT>
<Script language = JavaScript src = jquery-1.2.3.pack.js> </SCRIPT>
Add two JS Class Libraries
Then the HTML tag in the body. The following figure shows the HTML format (aa.gif is the big image we use for testing)
<Div style = "position: relative;">

<Div style = "border: solid 2px black; width: 100px; Height: 100px; cursor: hand; position: absolute; left: 0px; Z-index: 10; top: 0px; Background-color: Black filter: alpha (opacity = 20); "id =" divcut "> </div>

</Div>
<HR/>
<Input type = button onclick = "cut ()" value = "Confirm crop"/>
<HR/>
Cropped results:

<HR/>
<Div style = "border: solid 1px black;" id = "divrecord"> </div>

And then Javascript Code Now
<Script language = JavaScript>
Function Init () // initialization execution
{
VaR cutdiv = Document. getelementbyid ('divcut ');
Drag. INIT (cutdiv); // This is the key to dragging to the Black Box.
Cutdiv. ondrag = function (x, y) // This is the event triggered when the black box is dragged. X and Y are the coordinates.
{
Document. getelementbyid ("divrecord "). innerhtml = "coordinates of cutdiv" + x + '--' + Y + "<br> image coordinates" + document. getelementbyid ("im "). offsetleft + "-" + document. getelementbyid ("im "). offsettop;
}
}
Function cut () // cropping button event
{
VaR x = Document. getelementbyid ("divcut"). offsetleft-10; // minus 10 is because the starting position of the big image X is 10.
Var y = Document. getelementbyid ("divcut"). offsettop;

$. Get ("cutimageajax. aspx? T = "+ (new date ()). valueof (), {offx: X, offy: y}, callback); // Ajax method in jquery, which is relatively simple. The coordinates of X and Y are passed in.
}
Function callback (RES) // This is the callback function. If RES is equal to null, the cropped image is displayed successfully. The address and name of the cropped image are fixed.
{
If (RES = '')
{
Document. getelementbyid ('imgresresult'). src = 'pic/aa1.gif ';
}
}
</SCRIPT>

then you should check the background processing of the cutimageajax. ASPX page. In fact, it is relatively simple to crop images in the background.
protected void page_load (Object sender, eventargs e)
{< br> If (! Page. ispostback)
{< br> string x = page. request. querystring ["offx"]. tostring ();
string y = page. request. querystring ["offy"]. tostring ();

Bitmap Bm = new Bitmap (server. mappath ("PIC/aa.gif "));
Rectangle clonerect = new rectangle (Int. parse (x), Int. parse (Y), 100,100 );
Pixelformat format = BM. pixelformat;
Bitmap clonebitmap = BM. Clone (clonerect, format );

// === Save the image ====
Clonebitmap. Save (server. mappath ("PIC/aa1.gif"), imageformat. GIF );
}
}
Check it out. The key cropping code is like this. However, I have not made any other judgment here, such as the slice format. If I want to upload images of different formats, I will not explain it here, but the truth is almost the same.

This is over. O (partition _ partition) O... haha