Image cropping and uploading using jquery plug-in

Image cropping and uploading using jquery plug-in

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, but 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 the custom avatar.

First, we use the jquery upload and cut plug-in imgAreaSelect.
Http://odyniec.net/projects/imgareaselect/
After pressurization, there are two js files in it.
One is jquery. min. js, and the other is jquery. imgareaselect. js.
Introduce these two js files into the project

Second, add javascript code to the file.

// Preview
Function preview (img, selection ){
Var scaleX = 100/(selection. width | 1 );
Var scale= 100/(selection. height | 1 );

// Obtain the width, height, left border, and right border of the selected box from the dynamic avatar.
Preview ('preview view'apps.css ({// view is the id of the preview Image
Width: Math. round (scaleX * 300) + 'px ',
Height: Math. round (scaleY * 220) + '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'); // put the new element after # biuuu
//. InsertAfter ($ ('# biuuu'); // put the new element after # biuuu
});

// Initialize Loading
$ (Window). load (function (){
$ ('# Biuuu'). imgAreaSelect ({
AspectRatio: '1: 1', // intercept Ratio
// Show: true,
// Resizable: false, // whether the size can be adjusted
AutoHide: false, // select whether to cancel the selection
Key: true, // whether to enable the keyboard. The default value is false.
// X1: 75, y1: 30, x2: 225, y2: 180, // region to be processed, original
// X1: X-axis coordinate in the upper left corner y1: Y-axis coordinate in the upper left corner x2: X-axis coordinate in the lower right corner y2: Y-axis coordinate in the lower right corner
Keys: {arrows: 1, ctrl: 5, shift: 'resize'}, // adjust the pixel size

// OnInit: function (img, selection) {ias. setSelection (100, 50,250,150, true); ias. update () ;}, // set the initial function to draw a selection box
OnSelectChange: preview, // event triggered when the selection box is moved
OnSelectEnd: getLocation // event triggered when the selection box ends

});
});

The above detailed parameter configurations are also available on the official website. Go and check them.

Finally, use
<Div>

<Asp: Button ID = "Button1" runat = "server" Text = "Button" onclick = "button#click"/>
</Div>

Note: 1. the plug-in is easy to work out to cut the preview effect, but I am struggling for a long time: how to upload the generated preview image? I found a piece of code on the Internet, I found that as long as the size of the uploaded image is different, the generated image is also different. Later I thought it was a problem of scaling ratio. That is to say, the actual image size is different from the size displayed on the page. If the image is scaled, we must restore the original image size when uploading and cutting images in the background, and the part to be cut needs to be enlarged or reduced accordingly.
Code:
System. Drawing. Image sourceImage = System. Drawing. Image. FromFile (Server. MapPath ("bee.jpg "));
Int height = Convert. ToInt32 (sourceImage. Height); // obtain the height of the original image
Int width = Convert. ToInt32 (sourceImage. Width); // obtain the width of the original image.

X1 = x1 * (width/320); // scale according to the actual size
X2 = x2 * (width/320 );

Y1 = y1 * (height/240 );
Y2 = y2 * (height/240 );