JavaScript screenshot jquery Plugin imgareaselect use detailed _jquery

In order to enable users to customize their own avatar, you need to provide a screenshot of the upload function, the current many sites, especially SNS class sites provide such a function, very practical. There are two main forms of implementation, one is flash screenshots, the other is JavaScript screenshots, two methods each have a swing, about flash screenshots can refer to the Uchome program in the Avatar upload function, but this is not the topic I want to discuss, I am here mainly how to achieve JavaScript screenshots, using jquery imgareaselect plug-ins, easy to achieve a custom avatar [Avatar]javascript screenshot function.

One, prepare:
Two JS files
1,jquery.js Download: jquery.js
2,jquery.imgareaselect.js Download: Jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

Second, use

Function Preview (IMG, selection) { 
var scaleX = 100/selection.width; 

//Dynamic small Avatar Gets the width, height, left border, and right frame of the currently selected box

$ (' #biuuu + div > img '). CSS ({ 
width:Math.round (ScaleX) + ' px ', 
height:Math.round (ScaleY *) + ' px ', C9/>marginleft: ' + math.round (ScaleX * selection.x1) + ' px ', 
margintop: '-' + math.round (ScaleY * selection.y1) + ' px ' 
}); 
 

Load Small Head

$ (document). Ready (function () { 
$ (' <div></div > ') 
. css ({ 
float: ' left ', 
position: ' relative ', 
overflow: ' Hidden ', 
width: ' 100px ' 
, Height: ' 100px ' 
}) 
. InsertAfter ($ (' #biuuu ')); 

//Initialization load

$ (window). Load (function () { 
$ (' #biuuu '). Imgareaselect ({aspectratio: ' 1:1 ', onselectchange:preview}); 

Third, call

<div class= "Container" > <p>  
</p> 

Using the JavaScript screenshot above to expand to achieve a lot of dynamic features, jquery provides Imgareaselect plug-in call is very simple, other relevant applications can refer to: Imgareaselect examples

Using the jquery plugin Imgareaselect to implement JavaScript screenshots is very simple, basically is a dynamic image display, get the source picture location and marquee size [width and height], easy to achieve JavaScript screenshots.