[DIV+CSS] Set the screen capture Part 1 (DIV screenshot)

Use the following code to get the screen. Use div plus CSS to control. Use MouseMove to get the change of the div when moving,

As follows:

Using 5 div to compose the first part of the implementation, now only the first part of the selection is implemented.

HTML section

1 <DivID= "BG"class= "Divshawd"onmousedown= "MouseDown ()"onmouseup= "MouseUp ()"onmousemove= "MouseMove ()"ondblclick= "confirmcapture ()">2    </Div>3 <DivID= "Divtop"class= "Divshawdarea"></Div>4 <DivID= "Divleft"class= "Divshawdarea"></Div>5 <DivID= "Divright"class= "Divshawdarea"></Div>6 <DivID= "Divbottom"class= "Divshawdarea"></Div>

CSS section

. divshawdarea {CursorCrosshair;PositionAbsoluteDisplayNoneBackground-color:BlackZ-index:1000;-moz-opacity:0.7;Opacity.70;FilterAlpha (opacity=70);}. divshawd {CursorCrosshair; Display: None; Position: Absolute; top:  0%;  Left: 0%; Width: 100%;  Height: 100%; Background-color: Black; Z-index: 1001; -moz-opacity: 0.0; Opacity: Filter: Alpha (opacity=0);}               

JAVASCRIPT section

<script type= "Text/javascript" >varMovecondition =false; varmove =false; varMovearea =false; varMoveareacondition =false; functionShowdiv () {//document.getElementById ("BG"). Style.display = "block";$ ("#bg"). Show (); $("#bg"). CSS ("cursor", "crosshair")); Movecondition=true; }     functionHidediv () {movecondition=false; //document.getElementById ("BG"). Style.display = ' None ';$ ("#bg"). Hide (); $("#divTop"). Hide (); $("#divLeft"). Hide (); $("#divRight"). Hide (); $("#divBottom"). Hide (); }     varORIGX = 0, compx = 0, Origareax = 0, TriMX = 0; varOrigy = 0, compy = 0, Origareay = 0, Trimy = 0; functionMouseDown () {if(movecondition) {$ ("#divTop"). Show (); $("#divLeft"). Show (); $("#divRight"). Show (); $("#divBottom"). Show (); //$ ("#show"). Show ();Move=movecondition; ORIGX=Event.clientx; Origy=Event.clienty; //$ ("#show"). CSS ("left", Event.clientx). CSS ("top", event.clienty);            //$ ("#show"). CSS ("width", "1"). CSS ("height", "1");Showdivarea (ORIGX, Origy, ORIGX + 1, Origy + 1); } Else if(moveareacondition) {Movearea=true; Origareax=Event.clientx; Origareay=Event.clienty; }    }     functionMouseMove () {if(move = =true) {Showdivarea (ORIGX, Origy, Event.clientx, Event.clienty); }        Else if(Movearea) {TriMX= Event.clientx-Origareax; Trimy= Event.clienty-Origareay; //$ ("#divBottom"). html = "X1:" + ORIGX + ", Y1:" + Origy + ", X2:" + compx + ", Y2:" + compy;Showdivarea (ORIGX + trimx, Origy + trimy, compx + trimx, Compy +trimy); }    }     functionMouseUp () {Move=false; Movecondition=false; Moveareacondition=true; $("#bg"). CSS ("cursor", "pointer")); COMPX=Event.clientx; Compy=Event.clienty; if(Movearea) {Movearea=false; Moveareacondition=false; ORIGX+=TriMX; Origy+=Trimy; COMPX+=TriMX; Compy+=Trimy; }    }     functionconfirmcapture () {alert ("Select area is: (X1:" + ORIGX + ", Y1:" + Origy + ", X2:" + compx + ", Y2:" + compy + ")"); $("#bg"). CSS ("cursor", "Default");    Hidediv (); }     functionShowdivarea (OX, OY, CX, CY) {if(OX >CX) {vartemp =OX; OX=CX; CX=temp; }         if(OY >CY) {            vartemp =OY; OY=CY; CY=temp; }         //$ ("#show"). CSS ("width", COMPX-ORIGX). CSS ("height", compy-origy);         $("#divTop"). CSS ("left", "0"). CSS ("Top", "0"); $("#divTop"). CSS ("width", "100%"). CSS ("height"), OY); $("#divLeft"). CSS ("left", "0"). CSS ("Top", OY); $("#divLeft"). CSS ("width", OX). CSS ("height", CY-OY); $("#divRight"). CSS ("left", CX). CSS ("Top", OY); $("#divRight"). CSS ("width", screen.width-cx). CSS ("height", CY-OY); $("#divBottom"). CSS ("left", "0"). CSS ("Top", CY); $("#divBottom"). CSS ("width", "100%"). CSS ("height", screen.height-CY); } </script>

[PS]: Now complete the first section, select the image you want to intercept. The following ideas are:

1. Use C # code to intercept the current screen picture. Part of the image is intercepted by the selected two point.

2. The captured content is saved as a picture. Then prompts out the Save window, completes the entire interception process

[DIV+CSS] Set the screen capture Part 1 (DIV screenshot)