Javascript screenshot function (CODE)

I haven't been here for a long time. I am confused for a period of time. In order to get hot as soon as possible, I made a JS. First of all, I read an article by a bloggers, I thought maybe I could use less code to implement it, so I was born of this little thing.

　　

In fact, I am more loyal to the original JS, but I will choose the xhr package of mootools when I use Ajax. After so long, I feel that it is time to enable a convenient framework to improve efficiency, some time ago, my colleagues introduced jquery, just like this, done! There are two drag-and-drop effects. jquery has many plug-ins, but I decided to abandon the plug-in for the sake of practice! Drag and Drop to implement it yourself!

In the design process, we fully consider the recent popular face of object and code separation. You only need to write such a few words on the page to use this.

<Script language = "JavaScript">
(Document). Ready (function (){
VaR imgcut1 = new imgcut ("showhere", "/mydog.jpg", 150,200,100,100 );
}
</SCRIPT>
<Div id = "showhere"> </div>
The input parameter is imgcut (where to create an object, the address of the original image, the width of the screenshot, the height of the screenshot, the left and right margin of the screenshot box, and the top and bottom margin of the screenshot box ). It is a bit wordy, mainly to enhance adaptability.

You can obtain image parameter information through these attributes and methods of the Instance Object:

Size: cutw, cuth

Position (relative to the upper left corner of the original graph): getcutleft (), getcuttop ()

Current size of the original image: getimgwidth (), getimgheight ()
Of course, don't forget to introduce files into the head.

<SCRIPT src = "jquery-1.2.6.pack.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "yuimgcut. js" type = "text/JavaScript"> </SCRIPT>
<Link href = "yuimgcut.css" rel = "stylesheet" type = "text/CSS"/>
First, design a constructor in imgcut.

Function imgcut (containername, imgsrc, cutw, cuth, dcutleft, dcuttop ){
This. containername = containername;
This. imgsrc = imgsrc;
This. cutw = cutw;
This. cuth = cuth;
This. dcutleft = dcutleft;
This. dcuttop = dcuttop;
This. Fill ();
}
The meanings of parameters have been described earlier. These parameters have their default values.

Imgcut. Prototype = {
Containername: "", // Where to create an object
Imgsrc: "", // address of the original image
Cutw: 150, // width of the clip
Cuth: 200, // captured height
Dcutleft: 100, // The left and right margin of the captured frame from the outer frame
Dcuttop: 100, // the top and bottom margin of the screenshot box from the outer frame
Fill: function (){}

}

 

<Div class = "imgcut1">
<Div class = "imgcut11">

<Table class = "imgcut112" border = "0" cellpadding = "0" cellspacing = "0">
<Tr> <TD/> </tr> <TD/> <TD class = "Main"/> <TD/> </tr> <TD/> </tr>
</Table>
</Div>
<Div class = "imgcut12">
<Div class = "imgcut121"> </div>
<Div class = "imgcut122">
<Div class = "imgcut1221"> </div>
</Div>
<Div class = "imgcut123"> </div>
</Div>
</Div>
The CSS here sets the default height and width.

. Imgcut1 {width: 352px; Height: 422px ;}
. Imgcut11 {width: 350px; Height: 400px; position: relative; overflow: hidden; Border: 1px solid #999999; margin: 0px auto}
. Imgcut111 {position: absolute; top: 0px; left: 0px; Border: 0px}
. Imgcut112 {position: absolute; top: 0px; left: 0px; filter: alpha (opacity = 70);-moz-opacity: 0.7; cursor: pointer}
. Imgcut112 TD {background-color: # cccccc; width: 100px; Height: 100px}
. Imgcut112 TD. Main {width: 150px; Height: 200px; Border: 1px solid # ffffff; Background-color: transparent}
. Imgcut12 {width: 249px; margin: 0px auto}
. Imgcut121 {float: Left; Border: 0px; Background: url(minc.gif) No-Repeat; width: 19px; Height: 19px}
. Imgcut122 {float: Left; Background: url(track.gif) No-repeat center; Height: 20px; width: 211px; position: relative}
. Imgcut1221 {position: absolute; top: 3px; left: 100px; Background: url(grip.gif) No-Repeat; width: 11px; Height: 16px}
. Imgcut123 {float: Left; Border: 0px; Background: url(maxc.gif) No-Repeat; width: 19px; Height: 19px}
To achieve the style effect, some people use two images to intercept one in the box and the other in the big box to hide the overflow, then, adjust the hidden points of the image in the large box and move the other image when you drag one of them, when I tested this practice, I found that it was easy to make the two images move a little bit out of sync, and it was a waste of browser computing resources if I looked at it with a mean eye, therefore, I designed a table with only one image to achieve the same effect. In web, table is not unusable, but used properly. It is difficult to drag the image by floating the table above the image, so I designed to divide the drag into two layers: the trigger layer and the move layer. The table serves as the trigger layer, in order to enhance the versatility and reduce the amount of code, the trigger layer and the mobile layer can also be integrated in some cases. In this way, the function of shrinking the image's scroll bar is also completed. The Code is as follows.

Drag: function (touchscreenname, dragname, rangename, track, ondragfunction ){
// Whether the mouse is pressed
VaR ismousedown = false;
// X coordinate of the last move of the mouse
VaR Cx = 0;
// Y coordinate of the last move of the mouse
VaR Cy = 0;
// Whether the touch screen is separated from the drag object
VaR jobjimggrag = dragname & (dragname) | (touchscreenname );
// Whether the activity scope is restricted
VaR rangex = [];
VaR rangey = [];
If (rangename ){
Rangex = [0, (rangename). Get (0). offsetWidth-jObjImgGrag.get (0). offsetwidth];
Rangey = [0, (rangename). Get (0). offsetHeight-jObjImgGrag.get (0). offsetheight];
}
(Touchscreenname).mousedown(function({%ismousedown%true%(this%.css ("cursor", "move"); Cx = 0; Cy = 0 ;});
(Document).mouseup(function(){ismousedowngrading false((touchscreenname).css ("cursor", "Pointer");}). mousemove (function (e ){
// This sentence is very important, making drag and drop smoother
Try {document. selection & document. selection. empty & (document. selection. empty (), 1) | window. getselection & window. getselection (). removeallranges ();} catch (exp ){}
If (! Ismousedown)
Return;
If (Cx = 0 & Cy = 0 ){
Cx = E. clientx;
Cy = E. clienty;
}
If (track ){
If (track = "H") Cy = E. clienty;
If (track = "v") Cx = E. clientx;
}
VaR newleft;parseint(jobjimggrag.css ("Left"). Replace ("PX", "") + E. clientx-cx;
VaR newtopdeskparseint(jobjimggrag.css ("TOP"). Replace ("PX", "") + E. clienty-cy;
If (rangename ){
Newleft = newleft <rangex [0]? 0: newleft;
Newleft = newleft> rangex [1]? Rangex [1]: newleft;
Newtop = newtop <rangey [0]? 0: newtop;
Newtop = newtop> rangey [1]? Rangey [1]: newtop;
}
// Start dragging
Jobjimggrag.css ({left: newleft, top: newtop });
// The function triggered when dragging
Ondragfunction & ondragfunction ({left: newleft, top: newtop });
Cx = E. clientx;
Cy = E. clienty;
});
}
Call this method in fill.

This. Drag ("#" + this. containername + ". imgcut112", "#" + this. containername + ". imgcut111 ");
VaR jimgcut111 = ("#" + this. containername + ". imgcut111 ");
VaR W = jimgcut111.get (0). offsetwidth;
VaR H = jimgcut111.get (0). offsetheight;
VaR zoom = function (e ){
VaR NEWW = parseint (W/100 * E. Left );
VaR newh = parseint (NEWW/W * H );
Jimgcut111.css ({width: NEWW, height: newh });
};
This. drag ("#" + this. containername + ". imgcut1221 "," # "+ this. containername + ". imgcut1221 "," # "+ this. containername + ". imgcut122 "," H ", zoom );
VaR jimgcut1221 = ("#" + this. containername + ". imgcut1221 ");
("#" + This. containername + ". imgcut123 "). click (function () {var l1_parseint(jimgcut1221.css ("Left "). replace ("PX", "") + 1; L = L> 200? 200: lw.jimgcut1221.css ("Left", L); zoom ({left: l });});
("#" + This. containername + ". imgcut121 "). click (function () {var l1_parseint(jimgcut1221.css ("Left "). replace ("PX", "")-1; L = L <0? 0: lw.jimgcut1221.css ("Left", L); zoom ({left: l });});
When using the server program, we need to give them some positioning parameters.

Getcutleft: function (){
Return this. dcutleft-parseint ("#" + this. containername + ". imgcut111" ..css ("Left"). Replace ("PX ",""));
}, // The position on the left of the original graph
Getcuttop: function (){
Return this. dcuttop-parseint ("#" + this. containername + ". imgcut111" ..css ("TOP"). Replace ("PX ",""));
}, // The position relative to the top edge of the original graph
Getimgwidth: function (){
Return ("#" + this. containername + ". imgcut111"). Get (0). offsetwidth;
}, // Current width of the original graph
Getimgheight: function (){
Return ("#" + this. containername + ". imgcut111"). Get (0). offsetheight;
} // Current height of the original image

 

 

 

 

Method 2:

How to Implement JavaScript jquery plug-in imgareaselect

To enable users to customize their profile pictures, you need to provide an image upload function. Currently, many websites, especially SNS, provide this function, which is very practical. There are two main implementation methods: Flash and Javascript. Each method has a swing. For details about flash, refer to the picture upload function in the uchome program, however, this is not the topic I will discuss. Here I will mainly discuss how to implement JavaScript and use the imgareaselect plug-in of jquery to easily implement the [Avatar] JavaScript function of the custom avatar.

I. preparation:
Two JS files
1. jquery. js download: jquery. js
2. jquery. imgareaselect. js download: jquery.imgareaselect.js?imgareaselect-0.6.2.zip]

Ii. Use

Function Preview (IMG, selection ){
VaR scalex= 100/selection. width;
VaR scale= 100/selection. height;

// Obtain the width, height, left border, and right border of the selected box from the dynamic avatar.
$ ('# Biuuu + div> img'hangzhou.css ({
Width: Math. Round (scalex * 400) + 'px ',
Height: Math. Round (scaley * 300) + 'px ',
Marginleft: '-' + math. Round (scalex * selection. X1) + 'px ',
Margintop: '-' + math. Round (scaley * selection. Y1) + 'px'
});
}

// Load the Avatar
$ (Document). Ready (function (){
$ ('<Div> </div> ')
. CSS ({
Float: 'left ',
Position: 'relative ',
Overflow: 'ddy ',
Width: '100px ',
Height: '100px'
})
. Insertafter ($ ('# biuuu '));
});

// Initialize Loading
$ (Window). Load (function (){
$ ('# Biuuu'). imgareaselect ({aspectratio: '1: 1', onselectchange: preview });
});
3. Call

<Div class = "Container">
<P>

</P>
</Div>
The above JavaScript extension can implement many dynamic functions. The imgareaselect plug-in provided by jquery is very simple to call. For other related applications, see imgareaselect examples.

Using the jquery plug-in imgareaselect to implement Javascript is still very simple, basically it is a dynamic image display, get the location of the source image and the size of the Selection box [width and height], javascript functions can be easily implemented.