Use of the jQuery Image cropping plug-in CropZoom and bug fixes

Very good jQuery Image cropping plug-in CropZoom, very powerful, can rotate the image, change the image display ratio,
Drag the image to the specified area to crop the image. The cropped image is displayed in a timely manner, which can meet your needs.
Crop applications.
JQuery Image cropping plug-in CropZoom

Compatibility:
Compatible with IE6 +, fireFox2 +, Opera, Safria, and Chrome

Usage:
1. Load JS and CSS files

<Link href = "css/jquery-ui-1.7.2.custom.css" rel = "Stylesheet" type = "text/css"/>
<Style type = "text/css">
. Crop {width: 680px; margin: 20px auto; border: 1px solid # d3d3d3; padding: 4px; background: # fff}
# Cropzoom_container {float: left; width: 500px}
# Preview {float: left; width: 150px; height: 200px; border: 1px solid #999; margin-left: 10px; padding: 4px; background: # f7f7f7 ;}
. Page_btn {float: right; width: 150px; margin-top: 20px; line-height: 30px; text-align: center}
. Clear {clear: both}
. Btn {cursor: pointer}
</Style>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/jquery-ui-1.8.custom.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. cropzoom. js"> </script>

2. Write HTML content

<Div class = "crop">
<Div id = "cropzoom_container"> </div>
<Div id = "preview"> </div>
<Div class = "page_btn">
<Input type = "button" class = "btn" id = "crop" value = "cut Photo"/>
<Input type = "button" class = "btn" id = "restore" value = "photo reset"/>
</Div>
<Div class = "clear"> </div>
</Div>

3. Call a function

<Script type = "text/javascript">
$ (Function (){
Var cropzoom = $ ('# cropzoom_container'). cropzoom ({
Width: 500, // DIV layer width
Height: 360, // DIV layer height
BgColor: '# ccc', // DIV layer background color
EnableRotation: true, // whether to allow image rotation true false
EnableZoom: true, // whether to allow zoom in or out
Selector :{
W: 150, // selector width
H: 200, // rotation height
ShowPositionsOnDrag: true, // whether to display the drag-and-drop position for brainwashing
ShowDimetionsOnDrag: false,
Centered: true, // Center
BgInfoLayer: '# fff ',
BorderColor: 'Blue ', // select the area border style
Animated: false,
MaxWidth: 150, // maximum width
MaxHeight: 200, // maximum height
BorderColorHover: 'yellow' // hover the cursor over the border color of the selector.
},
Image :{
Source: '/focus19/images/b2.jpg ',
Width: 450, // the image width.
Height: 300, // The Image height
MinZoom: 30, // min zoom ratio
MaxZoom: 150 // maximum zoom-in ratio
            }
});
$ ("# Crop"). click (function () {// crop and submit
Cropzoom. send ('resize _ and_crop.php', 'post', {}, function (imgRet ){
$ ("# Generated"). attr ("src", imgRet );
});
});
$ ("# Restore"). click (function () {// display the initial status photo
$ ("# Generated"). attr ("src", "tmp/head.gif ");
Cropzoom. restore ();
});
});
</Script>

The following are notes for use and improvement:

1. Compatibility problem fixes

The first thing we need to talk about is the compatibility of the jQuery version. Because jQuery 1.9 or above does not provide $. browser, so if you are using jQuery 1.9 or later, you need to find all $ in the control. browser. msie and replace it with the available judgment.

/*
* IE browser version
*/
Iechecker = false;
If (navigator. appName = "Microsoft Internet Explorer "){
Iechecker = true;
}

2. Initialization method (attached with my own comments on parameters)

This control uses jquery-ui, so in addition to jquery, you also need to introduce relevant js and css (jquery-ui can be generated on the official website by yourself, and the resize, slider, and dragdrop modules are required)

<Link type = "text/css" rel = "stylesheet" href = "/stylesheets/jquery-ui.min.css"/>
<Script type = "text/javascript" src = "/javascripts/libs/jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript" src = "/javascripts/libs/jquery-ui.min.js"> </script>

$ ('# CropzoomContainer'). cropzoom ({
Width: 500, // the entire container size-width
Height: 375, // the entire container size-height
BgColor: '#000', // background color
OverlayColor: '# 000', // covering color
Selector :{
X: 0, // The position of the crop box-x axis (unavailable when the centered attribute is true)
Y: 0, // The position of the cropping box-y axis (unavailable when the centered attribute is true)
W: 229, // width of the cropping box
H: 100, // height of the cropping frame
AspectRatio: false, // The aspect ratio is fixed.
Centered: false, // center the cropping box (if it is true, the x and y values set above will be invalid)
BorderColor: 'yellow', // specifies the border color of the cropping box.
BorderColorHover: 'red', // specifies the border color of the cropping frame when the cursor passes.
BgInfoLayer: '# fff', // displays the background color of the cropping information.
InfoFontSize: 10, // display the font size of the cropping information
InfoFontColor: 'Blue ', // display the font color of the cropping information
ShowPositionsOnDrag: true, // position information displayed when dragging
ShowDimetionsOnDrag: true, // display the accuracy information when dragging
MaxHeight: null, // maximum allowed height of the cropping frame
MaxWidth: null // maximum width of the allowed cropping frame
},
Image :{
Source: '', // original image address
Rotation: 0, // Default rotation angle
Width: 0, // width of the source image displayed in the cropping box
Height: 0, // height of the source image displayed in the cropping box
MinZoom: 10, // min allowed scaling ratio
MaxZoom: 150 // maximum allowed zoom ratio
},
EnableRotation: true, // rotation allowed
EnableZoom: true, // allows scaling
EnableResize: true, // allows you to change the size of the cropping box (custom parameters are described below)
ZoomSteps: 1, // scale the step
RotationSteps: 5, // rotation step
OnSelectorDrag: null, // specifies the drag feedback function of the cropping box.
OnSelectorDragStop: null, // specifies the drag-and-drop function of the cropping frame to end the feedback function.
OnSelectorResize: null, // feedback function for cropping box size change
OnSelectorResizeStop: null, // The feedback function of the cropping box size change.
OnZoom: null, // original image scaling feedback function
OnRotate: null, // original image rotation feedback function
OnImageDrag: null // original image drag feedback function
});

3. Add parameters by yourself. You cannot change the size of the cropping frame.
The first step is to add the enableResize parameter to the parameter (including the default parameter in jquery. cropzoom. js and the definition in the previous initialization)
The second step is to determine whether to skip the process based on the parameters before using the jquery-ui control:

If ($ options. enableResize ){
_ Selector. resizable ({
...
});
}

4. Modify the send method and determine whether the cropping size is reasonable before submission.
First, find the send method and determine the range after obtaining the parameter;
According to the project requirements, my judgment is that there is no blank part in the cropping box, and the code is as follows:

If (params. imageX <= params. selectorX & params. imageY <= params. selectid & params. imageX + params. imageW> = params. selectorX + params. selectorW & params. imageY + params. imageH> = params. selectid + params. selectorH ){
// Send
}
Else {
Alert ('blank part in the cropping range ');
}

5. Fixed the error of the cropping frame (it is invalid for earlier versions than 7)
Because the border of the cropping frame is in the preset size plus the frame of 1 px, visual judgment may produce errors. Because the current project is not virtualized and compatible with browsers below ie7, therefore, you can simply set box-sizing to solve this problem.
Find the createSelector method and add boxSizing to the end of cursor to set it to border-box:

'Cursor ': 'Move ',
'Boxsizing': 'border-box'