How to Implement JavaScript screenshot jquery plug-in imgareaselect Usage Details

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 uchome.ProgramBut this is not the topic I want to discuss. Here I mainly discuss how to implement JavaScript and use the imgareaselect plug-in of jquery to easily implement the [Avatar] JavaScript function of a 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.